php+croppic.js實現(xiàn)剪切上傳圖片功能

// css 部分
#yourId {
  width: 200px;
  height: 150px;
  position:relative; /* or fixed or absolute */
}
// html 部分
div id="yourId">/div>
// js部分
var options = [
　　uploadUrl:'圖片上傳地址',
　　cropUrl: '圖片裁切后發(fā)送的地址',
　　// 等等各種參數(shù)配置信息
];
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');
// 上傳服務(wù)器的圖片路徑
$imgUrl = $request->body['imgUrl'];
// 原始圖片寬高
$imgInitW = $request->body['imgInitW'];
$imgInitH = $request->body['imgInitH'];
// 新縮放的圖片寬高
$imgW = $request->body['imgW'];
$imgH = $request->body['imgH'];
// 與縮放圖像相關(guān)的裁剪圖像的左上角
$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);
// 創(chuàng)建畫布并載入圖像
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('文件無法寫入');
}
// 創(chuàng)建一幅真彩色的圖像，從而支持更為豐富的色彩，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);
// 旋轉(zhuǎn)圖像
$rotated_image = $angle ? imagerotate($resizedImage, -$angle, 0) : $resizedImage;
// 獲取圖像寬高
$rotated_width = imagesx($rotated_image);
$rotated_height = imagesy($rotated_image);
// 旋轉(zhuǎn)后 - 縮放后
$dx = $rotated_width - $imgW;
$dy = $rotated_height - $imgH;
// 裁剪旋轉(zhuǎn)后的圖片到圖像
$cropped_rotated_image = imagecreatetruecolor($imgW, $imgH);
if ($type == '.png') {
  // 設(shè)置黑色為透明
  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);
// 剪切圖像到規(guī)定區(qū)域
$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);
/**
 * 這里需要進(jìn)行上傳服務(wù)器操作
 */
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[確認(rèn)]使用原圖，[取消]清除圖片');
      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[確認(rèn)]使用原圖，[取消]清除圖片');
      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);