第php+croppic.js實現(xiàn)剪切上傳圖片功能最近需要實現(xiàn)裁剪圖片上傳，想起之前公司用到的一個插件，卻不知道叫什么名字了。

在網(wǎng)上找了有些時間，最終找到了這個網(wǎng)站。

/

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

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

下載安裝

官網(wǎng)提供兩種下載方式，第一種類似于SDK的wholewebsite，另外一種簡潔版croppic。前者提供了完整的項目結(jié)構(gòu)以及前后端案例，后者只有croppic.css、croppic.js、croppic.min.js三個文件。

基本使用

//css部分

#yourId{

width:200px;

height:150px;

position:relative;/*orfixedorabsolute*/

//html部分

divid="yourId"/div

//js部分

varoptions=[

uploadUrl:'圖片上傳地址',

cropUrl:'圖片裁切后發(fā)送的地址',

//等等各種參數(shù)配置信息

varcropperHeader=newCroppic('yourId',options);

Options參數(shù)

uploadUrl

uploadUrl:'制定上傳的地址',

uploadData:{

"dummyData":1,

"dummyData2":"text"

}

php處理時，和普通的上傳文件一模一樣，使用$_FILES['img']可以直接獲取文件信息，上傳并保存;使用$_REQUEST[]則直接可以獲取js中uploadData中的數(shù)據(jù)。

php在處理完成后，根據(jù)成功狀態(tài)返回如下json結(jié)構(gòu)

成功時

"status":"success",

"url":"返回成功后的圖片url地址",

"width":源圖片寬度,

"height":源圖片高度

}

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

失敗時

"status":"error",

"message":"這里是你的失敗提示信息"

}

cropUrl

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

varcropperOptions={

uploadUrl:'裁切后請求的地址',

uploadData:{

"dummyData":1,

"dummyData2":"text"

varcropperHeader=newCroppic('yourId',cropperOptions);

請求php的參數(shù)基本如下：

php端使用nezamy/route的request類獲取croppic.js裁切后發(fā)送過來的參數(shù)

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

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

PHP各種操作圖片GD庫

$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:

thrownew\Exception('不支持的圖片類型');

if(!is_writable(dirname($output_filename))){

thrownew\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=$angleimagerotate($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);

*這里需要進行上傳服務(wù)器操作

echojson_encode([

'status'='success',

'url'=$output_filename.$type,

//最后刪除緩存圖片

//unlink($output_filename.$type);

JS各種配置

varcrop_image_src='image_src';

varcroppedOptions={

cropUrl:'/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:'divspanid="bubblingG_1"/spanspanid="bubblingG_2"/spanspanid="bubblingG_3"/span/div',

onBeforeImgUpload:function(){

crop_image_src=$('#image_input').val();

onAfterRemoveCroppedImg:function(){

varres=confirm('您是要使用原圖還是清除圖片？\n\r[確認]使用原圖，[取消]清除圖片');

if(res){

$('#image_input').val(crop_image_src);

$('#cropContainerEyecandy').prepend('imgsrc='+crop_image_src+'width="100%"

}else{

$('#image_input').val('');

$('.croppedImg').remove();

onReset:function(){

varres=confirm('您是要使用原圖還是清除圖片？\n\r[確認]使用原圖，[取消]清除圖片');

if(res){

$('#image_input').val(crop_image_src);

$('#cropContainerEyecandy').prepend('imgsrc='+crop_image_src+'width="100%"

}else{

$('#imag