在 Laravel 5 中使用 jQuery 插件 Croppic + Intervention Image 实现图片上传和裁剪裁切上传图像有大用

1、概述

我们经常需要为用户头像编写图片上传组件并实现裁剪功能，而每个网站布局都有自己的自定义尺寸，这导致在服务器上裁剪图片可能会造成图片失真，正因如此我更喜欢在客户端编辑图片，而且最近我找到一个jQuery插件可以很轻松地实现这种功能，这个jQuery插件就是Croppic。

其工作方式和Twitter、Facebook或LinkedIn的用户头像组件一样，首先用户选择需要操作的图片，然后会提供给用户滑动和缩放选项，当感觉合适了就可以点击裁剪按钮，是不是很简单？

Croppic的工作方式如下：

在浏览器窗口选择图片上传到服务器
服务器返回刚刚上传的图片链接，Croppic通过该链接渲染图片
用户可以滑动、缩放图片，当点击裁剪按钮后图片数据被发送到服务器
服务器接收到图片的原始链接以及裁剪细节：x坐标，y坐标，裁剪宽度，高度，角度
服务器使用裁剪细节数据处理图片后发送成功响应到客户端
如果整个过程中出现错误，会弹出包含错误信息的对话框
裁剪成功后，最终的图片会显示在用户的Croppic盒子里
用户可以点击关闭按钮然后重新操作整个过程

在本教程中我们使用Intervention Image扩展包来进行服务器端的图片处理。

注：本教程的完整代码可以在Github上找到：https://github.com/codingo-me/laravel-croppic

2、安装配置Laravel项目

在继续本教程之前需要先创建一个Laravel项目croppic（已创建的略过），并且在.env中添加如下配置：

URL=http://croppic.dev/
UPLOAD_PATH=/var/www/croppic/public/uploads/

注：以上域名和路径需要根据你的具体情况做修改。

如果没有安装intervention/image，参考这篇教程：在 Laravel 5 中集成 Intervention Image 实现对图片的创建、修改和压缩处理

3、Croppic选项

你可以通过JS选项数组来配置几乎所有东西，Croppic可以以内置模态框的形式显示，然后你传递自定义数据到后端，定义缩放/旋转因子，定义图片输出元素，或者自定义上传按钮。

可以通过FileReader API在客户端初始化图片上传，这样你可以跳过上面Croppic工作方式的前两个步骤，但是这种解决方案有一个缺点——某些浏览器不支持FileReader API。

在这个例子中我们定义上传及裁剪URL，然后手动发送裁剪宽度和高度到后端：

var eyeCandy = $('#cropContainerEyecandy');
var croppedOptions = {
    uploadUrl: 'upload',
    cropUrl: 'crop',
    cropData:{
        'width' : eyeCandy.width(),
        'height': eyeCandy.height()
    }
};
var cropperBox = new Croppic('cropContainerEyecandy', croppedOptions);

eyeCandy变量标记渲染Croppic的DOM元素，在croppedOptions配置中我们使用jQuery来获取eyeCandy元素的尺寸，这里我们需要计算尺寸，这是由于我们在前端使用了Bootstrap栅格，因此宽度和高度都会随着窗口的变化而变化。

4、前端

如上所述，我们使用了Bootstrap并且从Croppic官网直接下载了自定义样式（home.blade.php）：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Upload and edit images in Laravel using Croppic jQuery plugin</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="plugins/croppic/assets/css/main.css"/>
    <link rel="stylesheet" href="plugins/croppic/assets/css/croppic.css"/>

    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,900' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Mrs+Sheppards&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

</head>
<body>

<div class="container">
    <div class="row margin-bottom-40">
        <div class="col-md-12">
            <h1>Upload and edit images in Laravel using Croppic jQuery plugin</h1>
        </div>
    </div>

    <div class="row margin-bottom-40">
        <div class=" col-md-3">
            <div id="cropContainerEyecandy"></div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <p><a href="http://www.croppic.net/" target="_blank">Croppic</a> is ideal for uploading profile photos,
        or photos where you require predefined size/ratio.</p>
        </div>
    </div>
</div>
<script src=" https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="plugins/croppic/croppic.min.js"></script>
<script>
    var eyeCandy = $('#cropContainerEyecandy');
    var croppedOptions = {
        uploadUrl: 'upload',
        cropUrl: 'crop',
        cropData:{
            'width' : eyeCandy.width(),
            'height': eyeCandy.height()
        }
    };
    var cropperBox = new Croppic('cropContainerEyecandy', croppedOptions);
</script>
</body>
</html>

5、路由

我们需要3个路由，一个用于首页，一个用于上传post请求，还有一个用于裁剪post请求：

<?php

Route::get('/', 'CropController@getHome');
Route::post('upload', 'CropController@postUpload');
Route::post('crop', 'CropController@postCrop');

根据以往经验我们知道Laravel会抛出CSRF token错误，因此我们在CSRF中间件中将裁剪和上传操作予以排除：

<?php

namespace App\Http\Middleware;

use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as BaseVerifier;

class VerifyCsrfToken extends BaseVerifier{
    /**
     * The URIs that should be excluded from CSRF verification.
     *
     * @var array
     */
    protected $except = [
        'upload',
        'crop'
    ];
}

6、后端逻辑

Image模型和迁移文件

这里我们使用数据库保存图片以便跟踪图片上传，通常在图片和用户之间还会建立关联，从而将用户和图片关联起来。

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Image extends Model{
    protected $table = 'images';

    public static $rules = [
        'img' => 'required|mimes:png,gif,jpeg,jpg,bmp'
    ];
    public static $messages = [
        'img.mimes' => 'Uploaded file is not in image format',
        'img.required' => 'Image is required'
    ];
}

通常我习惯将模型类放到独立的目录app/Models中。

以下是创建images表的迁移文件：

<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateImages extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('images', function (Blueprint $table) {
            $table->increments('id');
            $table->text('original_name');
            $table->text('filename');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('images');
    }
}

你需要创建新的数据库和数据库用户，然后将配置及凭证信息配置到.env中对应选项，完成这些操作之后就可以运行迁移命令：php artisan migrate。

上传图片逻辑

该方法在用户从浏览器对话框选择图片之后会立即调用：

public function postUpload()
{
        $form_data = Input::all();

        $validator = Validator::make($form_data, Image::$rules, Image::$messages);

        if ($validator->fails()) {

            return Response::json([
                'status' => 'error',
                'message' => $validator->messages()->first(),
            ], 200);

        }

        $photo = $form_data['img'];

        $original_name = $photo->getClientOriginalName();
        $original_name_without_ext = substr($original_name, 0, strlen($original_name) - 4);

        $filename = $this->sanitize($original_name_without_ext);
        $allowed_filename = $this->createUniqueFilename( $filename );

        $filename_ext = $allowed_filename .'.jpg';

        $manager = new ImageManager();
        $image = $manager->make( $photo )->encode('jpg')->save(env('UPLOAD_PATH') . $filename_ext );

        if( !$image) {

            return Response::json([
                'status' => 'error',
                'message' => 'Server error while uploading',
            ], 200);

        }

        $database_image = new Image;
        $database_image->filename      = $allowed_filename;
        $database_image->original_name = $original_name;
        $database_image->save();

        return Response::json([
            'status'    => 'success',
            'url'       => env('URL') . 'uploads/' . $filename_ext,
            'width'     => $image->width(),
            'height'    => $image->height()
        ], 200);
}

首先我使用Image模型的验证数组验证输入，在那里我指定了图片格式并声明图片是必填项。你也可以添加其它约束，比如图片尺寸等。

如果验证失败，后台会发送错误响应，Croppic也会弹出错误对话框。

注：原生的弹出框看上去真的很丑，所以我总是使用SweetAlert，要使用SweetAlert可以在croppic.js文件中搜索alert并将改行替换成：sweetAlert("Oops...", response.message, 'error'); 当然你还要在HTML中引入SweetAlert相关css和js文件。

我们使用sanitize和createUniqueFilename方法创建服务器端文件名，通常我还会创建ImageRepository并将所有所有方法放置到其中，但是这种方式更简单：

private function sanitize($string, $force_lowercase = true, $anal = false)
{
        $strip = array("~", "`", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "_", "=", "+", "[", "{", "]",
            "}", "\\", "|", ";", ":", "\"", "'", "&#8216;", "&#8217;", "&#8220;", "&#8221;", "&#8211;", "&#8212;",
            "â€”", "â€“", ",", "<", ".", ">", "/", "?");
        $clean = trim(str_replace($strip, "", strip_tags($string)));
        $clean = preg_replace('/\s+/', "-", $clean);
        $clean = ($anal) ? preg_replace("/[^a-zA-Z0-9]/", "", $clean) : $clean ;

        return ($force_lowercase) ?
            (function_exists('mb_strtolower')) ?
                mb_strtolower($clean, 'UTF-8') :
                strtolower($clean) :
            $clean;
}

private function createUniqueFilename( $filename )
{
        $upload_path = env('UPLOAD_PATH');
        $full_image_path = $upload_path . $filename . '.jpg';

        if ( File::exists( $full_image_path ) )
        {
            // Generate token for image
            $image_token = substr(sha1(mt_rand()), 0, 5);
            return $filename . '-' . $image_token;
        }

        return $filename;
}

创建完独立的文件名后，我们使用Intervention Image提供的ImageManger来保存上传的图片。从上传方法返回的响应中Croppic需要如下字段：保存图片的status、url、width和height。

裁剪图片逻辑

用户点击裁剪按钮后，Croppic会将用户数据发送到后端路由以便对图片执行裁剪。到这里，你应该看到了，Croppic不做任何实际裁剪工作:-)，它只负责发送x/y坐标以及裁剪的宽度和高度数据，具体的裁剪实现逻辑还需要在后台编写。Croppic项目为此提供了一些相关的php脚本，但这里我们仍然选择使用Intervention Image扩展包提供的方法：

public function postCrop()
{
        $form_data = Input::all();
        $image_url = $form_data['imgUrl'];

        // resized sizes
        $imgW = $form_data['imgW'];
        $imgH = $form_data['imgH'];
        // offsets
        $imgY1 = $form_data['imgY1'];
        $imgX1 = $form_data['imgX1'];
        // crop box
        $cropW = $form_data['width'];
        $cropH = $form_data['height'];
        // rotation angle
        $angle = $form_data['rotation'];

        $filename_array = explode('/', $image_url);
        $filename = $filename_array[sizeof($filename_array)-1];

        $manager = new ImageManager();
        $image = $manager->make( $image_url );
        $image->resize($imgW, $imgH)
            ->rotate(-$angle)
            ->crop($cropW, $cropH, $imgX1, $imgY1)
            ->save(env('UPLOAD_PATH') . 'cropped-' . $filename);

        if( !$image) {

            return Response::json([
                'status' => 'error',
                'message' => 'Server error while uploading',
            ], 200);

        }

        return Response::json([
            'status' => 'success',
            'url' => env('URL') . 'uploads/cropped-' . $filename
        ], 200);

}

完整的控制器CropController看上去应该是这样的：

<?php

namespace App\Http\Controllers;

use App\Models\Image;
use Illuminate\Support\Facades\Validator;
use Illuminate\Support\Facades\Input;
use Illuminate\Support\Facades\Response;
use Intervention\Image\ImageManager;
use Illuminate\Support\Facades\File;

class CropController extends Controller{

    public function getHome()
    {
        return view('home');
    }

    public function postUpload()
    {
        $form_data = Input::all();

        $validator = Validator::make($form_data, Image::$rules, Image::$messages);

        if ($validator->fails()) {

            return Response::json([
                'status' => 'error',
                'message' => $validator->messages()->first(),
            ], 200);

        }

        $photo = $form_data['img'];

        $original_name = $photo->getClientOriginalName();
        $original_name_without_ext = substr($original_name, 0, strlen($original_name) - 4);

        $filename = $this->sanitize($original_name_without_ext);
        $allowed_filename = $this->createUniqueFilename( $filename );

        $filename_ext = $allowed_filename .'.jpg';

        $manager = new ImageManager();
        $image = $manager->make( $photo )->encode('jpg')->save(env('UPLOAD_PATH') . $filename_ext );

        if( !$image) {

            return Response::json([
                'status' => 'error',
                'message' => 'Server error while uploading',
            ], 200);

        }

        $database_image = new Image;
        $database_image->filename      = $allowed_filename;
        $database_image->original_name = $original_name;
        $database_image->save();

        return Response::json([
            'status'    => 'success',
            'url'       => env('URL') . 'uploads/' . $filename_ext,
            'width'     => $image->width(),
            'height'    => $image->height()
        ], 200);
    }

    public function postCrop()
    {
        $form_data = Input::all();
        $image_url = $form_data['imgUrl'];

        // resized sizes
        $imgW = $form_data['imgW'];
        $imgH = $form_data['imgH'];
        // offsets
        $imgY1 = $form_data['imgY1'];
        $imgX1 = $form_data['imgX1'];
        // crop box
        $cropW = $form_data['width'];
        $cropH = $form_data['height'];
        // rotation angle
        $angle = $form_data['rotation'];

        $filename_array = explode('/', $image_url);
        $filename = $filename_array[sizeof($filename_array)-1];

        $manager = new ImageManager();
        $image = $manager->make( $image_url );
        $image->resize($imgW, $imgH)
            ->rotate(-$angle)
            ->crop($cropW, $cropH, $imgX1, $imgY1)
            ->save(env('UPLOAD_PATH') . 'cropped-' . $filename);

        if( !$image) {

            return Response::json([
                'status' => 'error',
                'message' => 'Server error while uploading',
            ], 200);

        }

        return Response::json([
            'status' => 'success',
            'url' => env('URL') . 'uploads/cropped-' . $filename
        ], 200);

    }

    private function sanitize($string, $force_lowercase = true, $anal = false)
    {
        $strip = array("~", "`", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "_", "=", "+", "[", "{", "]",
            "}", "\\", "|", ";", ":", "\"", "'", "&#8216;", "&#8217;", "&#8220;", "&#8221;", "&#8211;", "&#8212;",
            "â€”", "â€“", ",", "<", ".", ">", "/", "?");
        $clean = trim(str_replace($strip, "", strip_tags($string)));
        $clean = preg_replace('/\s+/', "-", $clean);
        $clean = ($anal) ? preg_replace("/[^a-zA-Z0-9]/", "", $clean) : $clean ;

        return ($force_lowercase) ?
            (function_exists('mb_strtolower')) ?
                mb_strtolower($clean, 'UTF-8') :
                strtolower($clean) :
            $clean;
    }

    private function createUniqueFilename( $filename )
    {
        $upload_path = env('UPLOAD_PATH');
        $full_image_path = $upload_path . $filename . '.jpg';

        if ( File::exists( $full_image_path ) )
        {
            // Generate token for image
            $image_token = substr(sha1(mt_rand()), 0, 5);
            return $filename . '-' . $image_token;
        }

        return $filename;
    }
}

如果操作成功，后台会返回裁剪后的图片链接，然后Croppic根据此链接显示新的图片。

声明：本文为译文，原文链接：https://tuts.codingo.me/upload-and-edit-image-using-croppic-jquery-plugin

21 thoughts on “在 Laravel 5 中使用 jQuery 插件 Croppic + Intervention Image 实现图片上传和裁剪”

封心 says:

https://github.com/fengyuanchen/cropper我感觉这个截图插件更好用一些
回复
2016年12月27日 at 上午9:12
zhongyf says:

求助，裁剪出来的图片很模糊怎么调呢？
回复
2016年8月27日 at 下午4:01

刘刚 says:

@学院君就是啊裁剪后的图片变模糊了，怎么解决呢？
回复
2016年10月18日 at 下午4:38

大鲸 says:

可以支持CSRF。
回复
2016年8月13日 at 下午1:17
汪逸 says:

VM9342:1 Uncaught SyntaxError: Unexpected end of JSON input 求助
回复
2016年8月5日 at 上午10:09

汪逸 says:

感谢，解决了！  。我是路由重复了
  回复
  2016年8月5日 at 下午3:36
学院君 says:

JSON格式不正确吧。。。
回复
2016年8月5日 at 上午10:13

无比 says:

裁剪返回>NotReadableException，Unable to init from given url（http://lv66.bcup/uploads/123-85947.jpg）
http://lv66.bcup/uploads/123-85947.jpg 地址可以直接在浏览器里打开
回复
2016年4月2日 at 下午1:57
忍无可忍转身呐个吻 says:

学院君求帮助啊,Uncaught SyntaxError: Unexpected token < 错误…感觉本身就有问题
回复
2016年3月31日 at 下午5:11

春景秋 says:

并不是，我看中间件里，已经屏蔽掉了！我也出现了这个问题，请问解决了吗
回复
2016年5月5日 at 下午3:04
回风哥哥 says:

搞定没？最佳实践应该是什么样的？
回复
2016年6月22日 at 下午7:33
回风哥哥 says:

缺少 token? 把『{{ csrf_token() }}』加到表单里？
回复
2016年4月9日 at 下午9:28

忍无可忍转身呐个吻 says:

Uncaught SyntaxError: Unexpected token < 点击添加图片然后出现这个错误
回复
2016年3月31日 at 下午1:12
eriksome says:

可以裁剪gif吗?
回复
2016年3月24日 at 下午9:51

学院君 says:

试下不就知道了
回复
2016年3月25日 at 上午12:17

回风哥哥 says:

这个太好了，最近刚好在搞这块，雪中送炭啊,学院君！！
回复
2016年3月24日 at 下午4:55

回风哥哥 says:

最近忙的还没顾上搞。
回复
2016年4月9日 at 下午9:28
学院君 says:

[哈哈] 学院还会不断扩充内容
回复
2016年3月25日 at 上午12:17
忍无可忍转身呐个吻 says:

你能用吗
回复
2016年3月31日 at 下午3:32

Arthas says:

ImageManager 是啥子，哪里可以看到文档介绍？
回复
2016年3月22日 at 下午10:21

Arthas says:

哦，是intervention image 扩展包里面的。
回复
2016年3月22日 at 下午10:23

You are here

1、概述

2、安装配置Laravel项目

3、Croppic选项

4、前端

5、路由

6、后端逻辑

Image模型和迁移文件

上传图片逻辑

裁剪图片逻辑

学院君 has written 626 articles

21 thoughts on “在 Laravel 5 中使用 jQuery 插件 Croppic + Intervention Image 实现图片上传和裁剪”

来自 http://laravelacademy.org/post/3677.html

友情链接

搜索表单

用户登录

You are here

在 Laravel 5 中使用 jQuery 插件 Croppic + Intervention Image 实现图片上传和裁剪裁切 上传图像 有大用

1、概述

2、安装配置Laravel项目

3、Croppic选项

4、前端

5、路由

6、后端逻辑

Image模型和迁移文件

上传图片逻辑

裁剪图片逻辑

学院君 has written 626 articles

21 thoughts on “在 Laravel 5 中使用 jQuery 插件 Croppic + Intervention Image 实现图片上传和裁剪”

来自 http://laravelacademy.org/post/3677.html

友情链接

在 Laravel 5 中使用 jQuery 插件 Croppic + Intervention Image 实现图片上传和裁剪裁切上传图像有大用