最近需要实现裁剪图片上传，想起之前公司用到的一个插件，却不知道叫什么名字了。

在网上找了有些时间，最终找到了这个网站。

nofollow" href="http://www.croppic.net/">http://www.croppic.net/

因为官网文档全部都是英文，所以看起来有些吃力，可以大概看懂80%，但是缺少详细的案例说明，所以真正配置起来还是非常懵逼。

如果完全按照官网文档的步骤，大概就是这样的

下载安装@H_403_13@

官网提供两种下载方式，第一种类似于SDK的whole website，另外一种 简洁版croppic。前者提供了完整的项目结构以及前后端案例，后者只有croppic.css、croppic.js、croppic.min.js三个文件。

基本使用@H_403_13@

PHP;"> // css 部分 #yourId { width: 200px; height: 150px; position:relative; /* or fixed or absolute */ } // html 部分

// js部分 var options = [ 　　uploadUrl:'图片上传地址',　　cropUrl: '图片裁切后发送的地址',　　// 等等各种参数配置信息 ]; var cropperHeader = new Croppic('yourId',options);

Options 参数@H_403_13@

uploadUrl@H_403_13@

PHP;"> uploadUrl:'制定上传的地址',uploadData:{ 　　"dummyData":1,　　"dummyData2":"text" }

PHP处理时，和普通的上传文件一模一样，使用$_FILES['img']可以直接获取文件信息，上传并保存;使用$_REQUEST[]则直接可以获取js中uploadData中的数据。

PHP在处理完成后，根据成功状态返回如下json结构

成功时

PHP;"> { 　　 "status":"success","url":"返回成功后的图片URL地址","width":源图片宽度,　　 "height":源图片高度 }

注意：源图片宽高获取方式 list($width,$height) = getimagesize($_FILES["img"]["tmp_name"]);

失败时

PHP;"> { "status":"error","message":"这里是你的失败提示信息" }

cropUrl@H_403_13@

接下来是裁切图片的请求，基本使用

PHP;"> var cropperOptions = { uploadUrl:'裁切后请求的地址',uploadData:{ "dummyData":1,"dummyData2":"text" } } var cropperHeader = new Croppic('yourId',cropperOptions);

请求PHP的参数基本如下：

PHP 端使用 nezamy/route 的request类获取croppic.js裁切后发送过来的参数

body['imgUrl']; // 原始图片宽高 $imgInitW = $request->body['imgInitW']; $imgInitH = $request->body['imgInitH']; // 新缩放的图片宽高 $imgW = $request->body['imgW']; $imgH = $request->body['imgH']; // 与缩放图像相关的裁剪图像的左上角 $imgY1 = $request->body['imgY1']; $imgX1 = $request->body['imgX1']; // 裁剪图像宽高 $cropW = $request->body['cropW']; $cropH = $request->body['cropH']; // 角度 $angle = $request->body['rotation'];

其他参数就不用介绍了，文档上面可以看，如果看不懂或者不太清晰的可以直接下载案例做参照，比文档要详细些。接下来的重头戏在PHP端的处理。

PHP 各种操作图片GD库@H_403_13@

'success','url' => $output_filename . $type,]); // 最后删除缓存图片 //unlink($output_filename . $type);

JS各种配置@H_403_13@

PHP;"> var crop_image_src = 'image_src'; var croppedOptions = { cropUrl: 'http://deng.com/m/tool/crop_pic/crop',modal: true,doubleZoomControls: false,enableMousescroll: true,imgEyecandyOpacity: 0.4,rotateFactor: 90,zoomFactor: 20,outputUrlId: 'image_input',// loadPicture: '加載圖片',processInline: true,loaderHtml: '

',onBeforeImgUpload: function () { crop_image_src = $('#image_input').val(); },onAfterRemoveCroppedImg: function () { var res = confirm('您是要使用原图还是清除图片？\n\r[确认]使用原图，[取消]清除图片'); if (res) { $('#image_input').val(crop_image_src); $('#cropContainerEyecandy').prepend('图片？\n\r[确认]使用原图，[取消]清除图片'); if (res) { $('#image_input').val(crop_image_src); $('#cropContainerEyecandy').prepend('Box = new Croppic('cropContainerEyecandy',croppedOptions);

总结@H_403_13@

以上所述是小编给大家介绍的PHP+croppic.js实现剪切上传图片功能，希望对大家有所帮助。程序员遇到问题都会上（编程之家jb51.cc）查找问题解答方法！如果觉得站点还不错，随手转发给程序员朋友一下！

croppic.jsphp实现上传图片

• 上一篇：PHP设计模式之委托模式定义与用法简下一篇：PHP使用curl_multi_select解决curl