官网提供两种下载方式，第一种类似于SDK的whole website，另外一种 简洁版croppic。前者提供了完整的项目结构以及前后端案例，后者只有croppic.css、croppic.js、croppic.min.js三个文件。
rush:
PHP;">
// css 部分
#yourId {
width: 200px;
height: 150px;
position:relative; /* or fixed or absolute */
}
// html 部分
// js部分
var options = [
uploadUrl:'
图片上传地址', cropUrl: '
图片裁切后发送的地址', // 等等各种参数配置信息
];
var cropperHeader = new Croppic('yourId',options);
Options 参数
uploadUrl
rush:
PHP;">
uploadUrl:'制定
上传的地址',uploadData:{
"dummyData":1, "dummyData2":"text"
}
PHP处理时，和普通的上传文件一模一样，使用$_FILES['img']可以直接获取文件信息，上传并保存;使用$_REQUEST[]则直接可以获取js中uploadData中的数据。
PHP在处理完成后，根据成功状态返回如下json结构
成功时
rush:
PHP;">
{
"status":"success","url":"返回成功后的
图片URL地址","width":源
图片宽度, "height":源
图片高度
}
注意：源图片宽高获取方式 list($width,$height) = getimagesize($_FILES["img"]["tmp_name"]);
失败时
rush:
PHP;">
{
"status":"error","message":"这里是你的失败
提示信息"
}
cropUrl
接下来是裁切图片的请求，基本使用
rush:
PHP;">
var cropperOptions = {
uploadUrl:'裁切后请求的地址',uploadData:{
"dummyData":1,"dummyData2":"text"
}
}
var cropperHeader = new Croppic('yourId',cropperOptions);
请求PHP的参数基本如下：
PHP 端使用 nezamy/route 的request类获取croppic.js裁切后发送过来的参数
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端的处理。
'success','url' => $output_filename . $type,]);
// 最后
删除缓存
图片
//unlink($output_filename . $type);
JS各种配置
rush:
PHP;">
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: '
',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('
图片？\n\r[确认]使用原图，[取消]清除
图片');
if (res) {
$('#image_input').val(crop_image_src);
$('#cropContainerEyecandy').prepend('
Box = new Croppic('cropContainerEyecandy',croppedOptions);
总结
以上所述是小编给大家介绍的PHP+croppic.js实现剪切上传图片功能，希望对大家有所帮助。程序员遇到问题都会上（编程之家jb51.cc）查找问题解答方法！如果觉得站点还不错，随手转发给程序员朋友一下！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
