php+croppic.js实现剪切上传图片功能

// css 部分#yourId {  width: 200px;  height: 150px;  position:relative; /* or fixed or absolute */}// html 部分<div id="yourId"></div>// js部分var options = [　　uploadUrl:'图片上传地址',　　cropUrl: '图片裁切后发送的地址',　　// 等等各种参数配置信息];var cropperHeader = new Croppic('yourId',options);

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

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

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

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

$request = app('request');// 上传服务器的图片路径$imgUrl = $request->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'];

$temp_name    = "crop_temp_" . uniqid();$temp_path    = sys_get_temp_dir() . "/";$output_filename = $temp_path . $temp_name;$what      = getimagesize($imgUrl);// 创建画布并载入图像switch (strtolower($what['mime'])) {  case 'image/png':    $source_image = imagecreatefrompng($imgUrl);    $type     = '.png';    break;  case 'image/jpeg':    $source_image = imagecreatefromjpeg($imgUrl);    $type     = '.jpeg';    break;  case 'image/gif':    $source_image = imagecreatefromgif($imgUrl);    $type     = '.gif';    break;  default:    throw new /Exception('不支持的图片类型');}if (!is_writable(dirname($output_filename))) {  throw new /Exception('文件无法写入');}// 创建一幅真彩色的图像，从而支持更为丰富的色彩，gif文件不可使用$resizedImage = imagecreatetruecolor($imgW, $imgH);if ($type == '.png') {  // 将黑色定义为透明色  imagecolortransparent($resizedImage, imagecolorallocate($resizedImage, 0, 0, 0));}imagecopyresampled($resizedImage, $source_image, 0, 0, 0, 0, $imgW, $imgH, $imgInitW, $imgInitH);// 旋转图像$rotated_image = $angle ? imagerotate($resizedImage, -$angle, 0) : $resizedImage;// 获取图像宽高$rotated_width = imagesx($rotated_image);$rotated_height = imagesy($rotated_image);// 旋转后 - 缩放后$dx = $rotated_width - $imgW;$dy = $rotated_height - $imgH;// 裁剪旋转后的图片到图像$cropped_rotated_image = imagecreatetruecolor($imgW, $imgH);if ($type == '.png') {  // 设置黑色为透明  imagecolortransparent($cropped_rotated_image, imagecolorallocate($cropped_rotated_image, 0, 0, 0));}imagecopyresampled($cropped_rotated_image, $rotated_image, 0, 0, $dx / 2, $dy / 2, $imgW, $imgH, $imgW, $imgH);// 剪切图像到规定区域$final_image = imagecreatetruecolor($cropW, $cropH);if ($type == '.png') {  imagecolortransparent($final_image, imagecolorallocate($final_image, 0, 0, 0));}imagecopyresampled($final_image, $cropped_rotated_image, 0, 0, $imgX1, $imgY1, $cropW, $cropH, $cropW, $cropH);// 最后输出图像到文件,就可以直接使用file_get_content('output_filename'.$type)获取图片了imagepng($final_image, $output_filename . $type);/** * 这里需要进行上传服务器操作 */echo json_encode([  'status' => 'success',  'url'  => $output_filename . $type,]);// 最后删除缓存图片//unlink($output_filename . $type);

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: '<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',    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('<img class="croppedImg" src=' + crop_image_src + ' width="100%">');      } else {        $('#image_input').val('');        $('.croppedImg').remove();      }    },    onReset: function () {      var res = confirm('您是要使用原图还是清除图片？/n/r[确认]使用原图，[取消]清除图片');      if (res) {        $('#image_input').val(crop_image_src);        $('#cropContainerEyecandy').prepend('<img class="croppedImg" src=' + crop_image_src + ' width="100%">');      } else {        $('#image_input').val('');      }    },    onError: function (errormessage) {      alert('onError:' + errormessage)    }  };  var cropperBox = new Croppic('cropContainerEyecandy', croppedOptions);