php+croppic.js實現剪下上傳圖片

 最近需要實現裁剪圖片上傳，想起之前公司用到的一個外掛程式，卻不知道叫什麼名字了。

在網上找了有些時間，最終找到了這個網站。

http://www.croppic.net/

因為官網文檔全部都是英文，所以看起來有些吃力，可以大概看懂80%，但是缺少詳細的案例說明，所以真正配置起來還是非常懵逼。

如果完全按照官網文檔的步驟，大概就是這樣的

下載安裝

官網提供兩種下載方式，第一種類似於SDK的whole website，另外一種 簡潔版croppic。前者提供了完整的項目結構以及前後端案例，後者只有croppic.css、croppic.js、croppic.min.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);

Options 參數uploadUrl

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

php處理時，和普通的上傳檔案一模一樣，使用$_FILES['img']可以直接擷取檔案資訊，上傳並儲存;使用$_REQUEST[]則直接可以擷取js中uploadData中的資料。
php在處理完成後，根據成功狀態返回如下json結構

• 成功時

{　　 "status":"success",     "url":"返回成功後的圖片url地址",     "width":源圖片寬度, 
　　  "height":源圖片高度
}

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

• 失敗時

{    "status":"error",    "message":"這裡是你的失敗提示資訊"}  

cropUrl

接下來是裁切圖片的請求，基本使用

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

請求php的參數基本如下：

php 端使用 nezamy/route 的request類擷取croppic.js裁切後發送過來的參數

$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'];

 其他參數就不用介紹了，文檔上面可以看，如果看不懂或者不太清晰的可以直接下載案例做參照，比文檔要詳細些。接下來的重頭戲在php端的處理。

PHP 各種操作圖片GD庫

$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);

 JS各種配置

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);