最近需要實現(xiàn)裁剪圖片上傳，想起之前公司用到的一個插件，卻不知道叫什么名字了。
在網(wǎng)上找了有些時間，最終找到了這個網(wǎng)站。
http://www.croppic.net/
因為官網(wǎng)文檔全部都是英文，所以看起來有些吃力，可以大概看懂80%，但是缺少詳細的案例說明，所以真正配置起來還是非常懵逼。
如果完全按照官網(wǎng)文檔的步驟，大概就是這樣的
下載安裝
官網(wǎng)提供兩種下載方式，第一種類似于SDK的whole website，另外一種 簡潔版croppic。前者提供了完整的項目結(jié)構(gòu)以及前后端案例，后者只有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: '圖片裁切后發(fā)送的地址',
// 等等各種參數(shù)配置信息
];
var cropperHeader = new Croppic('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
接下來是裁切圖片的請求，基本使用
var cropperOptions = {
uploadUrl:'裁切后請求的地址',
uploadData:{
"dummyData":1,
"dummyData2":"text"
}
}
var cropperHeader = new Croppic('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:
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);
/**
* 這里需要進行上傳服務(wù)器操作
*/
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);
總結(jié)
以上所述是小編給大家介紹的php+croppic.js實現(xiàn)剪切上傳圖片功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:- 原生JS實現(xiàn)前端本地文件上傳
- JS實現(xiàn)可視化文件上傳
- js實現(xiàn)文件上傳功能 后臺使用MultipartFile
- JS+Struts2多文件上傳實例詳解
- vue.js 圖片上傳并預(yù)覽及圖片更換功能的實現(xiàn)代碼
- JavaScript使用享元模式實現(xiàn)文件上傳優(yōu)化操作示例
- JS實現(xiàn)圖片上傳多次上傳同一張不生效的處理方法
- js實現(xiàn)圖片上傳并預(yù)覽功能
- vue.js圖片轉(zhuǎn)Base64上傳圖片并預(yù)覽的實現(xiàn)方法
- Angularjs實現(xiàn)多圖片上傳預(yù)覽功能
- JavaScript實現(xiàn)異步圖像上傳功能
- SpringBoot+Vue.js實現(xiàn)前后端分離的文件上傳功能
- node.js自動上傳ftp的腳本分享
- JS實現(xiàn)的文件拖拽上傳功能示例
- Vue2.0實現(xiàn)調(diào)用攝像頭進行拍照功能 exif.js實現(xiàn)圖片上傳功能
- JS和Canvas實現(xiàn)圖片的預(yù)覽壓縮和上傳功能
- JavaScript代碼實現(xiàn)txt文件的上傳預(yù)覽功能
- js 實現(xiàn) input type="file" 文件上傳示例代碼
- js實現(xiàn)上傳圖片預(yù)覽的方法
- Servlet+Jsp實現(xiàn)圖片或文件的上傳功能具體思路及代碼
- 上傳圖片預(yù)覽JS腳本 Input file圖片預(yù)覽的實現(xiàn)示例
- JS實現(xiàn)上傳圖片的三種方法并實現(xiàn)預(yù)覽圖片功能
- js實現(xiàn)圖片上傳并正常顯示
- 一個簡單的jQuery插件ajaxfileupload.js實現(xiàn)ajax上傳文件例子
- JS中使用FormData上傳文件、圖片的方法
- 客戶端js判斷文件類型和文件大小即限制上傳大小
- js獲取上傳文件的絕對路徑實現(xiàn)方法
- 原生JS和jQuery版實現(xiàn)文件上傳功能
- 微信JSSDK上傳圖片
- 簡單實現(xiàn)js上傳文件功能
- JS文件上傳神器bootstrap fileinput詳解
- js實現(xiàn)上傳圖片之上傳前預(yù)覽圖片
- Javascript圖片上傳前的本地預(yù)覽實例
- 學(xué)習(xí)使用AngularJS文件上傳控件
- JS簡單實現(xiàn)文件上傳實例代碼（無需插件）
- 分享5個好用的javascript文件上傳插件
