在 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⊂=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 id="Upload-and-edit-images-in-Laravel-using-Croppic-jQuery-plugin">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请求：
<?phpRoute::get('/', 'CropController@getHome');Route::post('upload', 'CropController@postUpload');Route::post('crop', 'CropController@postCrop');根据以往经验我们知道Laravel会抛出CSRF token错误，因此我们在CSRF中间件中将裁剪和上传操作予以排除：
<?phpnamespace 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模型和迁移文件
这里我们使用数据库保存图片以便跟踪图片上传，通常在图片和用户之间还会建立关联，从而将用户和图片关联起来。
<?phpnamespace 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 表的迁移文件：
<?phpuse 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("~", "`", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "_", "=", "+", "[", "{", "]", "}", "\\", "|", ";", ":", "\"", "'", "‘", "’", "“", "”", "–", "—", "—", "–", ",", "<", ".", ">", "/", "?"); $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 看上去应该是这样的：
<?phpnamespace 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("~", "`", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "_", "=", "+", "[", "{", "]", "}", "\\", "|", ";", ":", "\"", "'", "‘", "’", "“", "”", "–", "—", "—", "–", ",", "<", ".", ">", "/", "?"); $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
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7319
9
1625
14
1349
46
1261
25
1209
29
11 최고의 PHP URL 쇼트너 스크립트 (무료 및 프리미엄)
Mar 03, 2025 am 10:49 AM
종종 키워드와 추적 매개 변수로 혼란스러워하는 긴 URL은 방문자를 방해 할 수 있습니다. URL 단축 스크립트는 솔루션을 제공하여 소셜 미디어 및 기타 플랫폼에 이상적인 간결한 링크를 만듭니다. 이 스크립트는 개별 웹 사이트 a에 유용합니다
Instagram API 소개
Mar 02, 2025 am 09:32 AM
Instagram은 2012 년 Facebook에서 유명한 인수에 이어 타사 사용을 위해 두 개의 API 세트를 채택했습니다. Instagram Graph API 및 Instagram Basic Display API입니다. 개발자는
Laravel의 플래시 세션 데이터로 작업합니다
Mar 12, 2025 pm 05:08 PM
Laravel은 직관적 인 플래시 방법을 사용하여 임시 세션 데이터 처리를 단순화합니다. 응용 프로그램에 간단한 메시지, 경고 또는 알림을 표시하는 데 적합합니다. 데이터는 기본적으로 후속 요청에만 지속됩니다. $ 요청-
Laravel Back End : Part 2, React가있는 React 앱 구축
Mar 04, 2025 am 09:33 AM
이것은 Laravel 백엔드가있는 React Application을 구축하는 데있어 시리즈의 두 번째이자 마지막 부분입니다. 이 시리즈의 첫 번째 부분에서는 기본 제품 목록 응용 프로그램을 위해 Laravel을 사용하여 편안한 API를 만들었습니다. 이 튜토리얼에서는 Dev가 될 것입니다
Laravel 테스트에서 단순화 된 HTTP 응답 조롱
Mar 12, 2025 pm 05:09 PM
Laravel은 간결한 HTTP 응답 시뮬레이션 구문을 제공하여 HTTP 상호 작용 테스트를 단순화합니다. 이 접근법은 테스트 시뮬레이션을보다 직관적으로 만들면서 코드 중복성을 크게 줄입니다. 기본 구현은 다양한 응답 유형 단축키를 제공합니다. Illuminate \ support \ Facades \ http를 사용하십시오. http :: 가짜 ([ 'google.com'=> 'Hello World', 'github.com'=> [ 'foo'=> 'bar'], 'forge.laravel.com'=>
PHP의 컬 : REST API에서 PHP Curl Extension 사용 방법
Mar 14, 2025 am 11:42 AM
PHP 클라이언트 URL (CURL) 확장자는 개발자를위한 강력한 도구이며 원격 서버 및 REST API와의 원활한 상호 작용을 가능하게합니다. PHP CURL은 존경받는 다중 프로모토콜 파일 전송 라이브러리 인 Libcurl을 활용하여 효율적인 execu를 용이하게합니다.
Codecanyon에서 12 개의 최고의 PHP 채팅 스크립트
Mar 13, 2025 pm 12:08 PM
고객의 가장 긴급한 문제에 실시간 인스턴트 솔루션을 제공하고 싶습니까? 라이브 채팅을 통해 고객과 실시간 대화를 나누고 문제를 즉시 해결할 수 있습니다. 그것은 당신이 당신의 관습에 더 빠른 서비스를 제공 할 수 있도록합니다.
2025 PHP 상황 조사 발표
Mar 03, 2025 pm 04:20 PM
2025 PHP Landscape Survey는 현재 PHP 개발 동향을 조사합니다. 개발자와 비즈니스에 대한 통찰력을 제공하는 프레임 워크 사용, 배포 방법 및 과제를 탐색합니다. 이 조사는 현대 PHP Versio의 성장을 예상합니다
