Image Cropper 裁剪图片

使用Image Cropper插件裁剪图片，是将原图片流以及裁剪的top，left，width，height值传递

/上传图片/
$(‘.upload-img’).on(‘change’,function() { var ieVersion = Number(document.documentMode); if(ieVersion < 10) {$(this).select();
$(this).blur();
//获取绝对路径
var src = document.selection.createRange().text;
artDialog.data(“img_data”, src);
} else {
var reader = new FileReader();
reader.onload = function(event) {
var src = event.target.result;
artDialog.data(“img_data”, src);
};
if(input.files && input.files[0]) {
reader.readAsDataURL(input.files[0]);
}
var data = artDialog.data(“img_data”); 此处data值是原图片流
之后将data.toString()传递到后台去处理，需要注意的是，在处理图片流的时候，
一般插件返回的base64编码的字符串都是有一个前缀的。

“data:image/jpeg;base64,” 解码之前这个得去掉。这里是通过截取字符串去除的

var idx = stream.indexOf(‘,’);
var value = stream.substring(idx + 1);

后台处理过程：
public String addImg(String stream, String w, String h, String x, String y) {
String url = null;
BASE64Decoder decoder = new BASE64Decoder();
try {
byte[] b = decoder.decodeBuffer(stream);
InputStream is = new ByteArrayInputStream(b);
String fileName = System.currentTimeMillis() + “.png”;
String upload = OSSManageUtil.upload(is, “dudu”, fileName);
url = upload + “?x-oss-process=image/crop,x_” + x + “,y_” + y + “,w_” + w + “,h_” + h + “”;
} catch (Exception e) {
e.printStackTrace();
}
return url;
}
首先将裁剪过后的图片流，进行base64解密，转换成byte数组，再转换成InputStream，将原图片上传到OSS，返回图片url

image cropper裁剪图片是将原图片的url地址进行指定格式的拼接来实现

?x-oss-process=image/crop,x_” + x + “,y_” + y + “,w_” + w + “,h_” + h + ” 指定格式。

在ajax成功回调之后，将裁剪后的图片url设置在image的src路径中，用来回显，并添加一个 隐藏域用来在保存对象的时候使用。

parent1.document.getElementsByClassName(‘image’)[0].src = data;
parent1.document.getElementById(‘avatar’).value = data;