#jquery+Jcrop剪裁图片。网络图片地址，弹窗实现剪裁，保存，并上传

#jquery+Jcrop剪裁图片。网络图片地址，弹窗实现剪裁，保存，并上传

一、引入jquery.js、jcrop.js、jcrop.css

点击按钮，弹窗加载图片

（注释：1、不要给图片设置样式宽高。 2、样式宽高需要计算和图片原本尺寸比例。 再用比例和截取得到的宽高计算）

使用剪裁插件

var selectArea = ‘’ // 声明变量保存截取的信息
$(‘.被剪裁图片的class|id’).Jcrop({
minSize: [375, 250],
onSelect: updateCoords,
onRelease: cancelSelect
});
function updateCoords©{
console.log(c.x);// x轴
console.log(c.y);// y轴
console.log(c.w);// 宽
console.log(c.h);// 高
selectArea = c
};
function cancelSelect(){
selectArea = ‘’
console.log(‘取消选择’)
};

得到截取后的图片。

添加点击事件，保存图片。（使用的是阿里云图片地址拼接，@后面拼接图片尺寸）http://uimg.liecdn.cn/image/post/69/ee/57/ce/69ee57cee743b0dc6fbdc5710e07c2ab.jpg@0-50-100-100a

保存截取后的图片

加载网络地址，转成file文件上传
fileProcess(endUrl,function (imageObj){
console.log(imageObj)
var fileData = imageObj.newFile
uploader.addFile(fileData) // 上传发送请求
})

//将base64转换为file文件
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.dataURL.split(‘,’), mime = arr[0].match(/.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n–){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});

function fileProcess(fileUrl,callBack){
var img = fileUrl;
var imgName = fileUrl.split(‘/’)
var image = new Image();
image.src = img;
// 允许跨域操作
image.setAttribute(“crossOrigin”,‘anonymous’);
image.onload = function(){
console.log(image.width,image.height)
var base64 = getBase64Image(image);
var newFile = dataURLtoFile(base64,imgName[imgName.length-1]);
console.log(newFile)
var imageObj = {
base64: base64,
newFile: newFile,
}
callBack (imageObj)
return imageObj
}
}