使用canvas和corpper.s

说说使用过程中遇到的一些坑，使用cropper.js实例化时候一定要用原生获取如：
var image = document.getElementById('img');
cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 1,
background: false, //是否显示网格背景
zoomable: false, //是否允许放大图像
guides: false, //是否显示裁剪框虚线
crop: function (event) { //剪裁框发生变化执行的函数。
canvas = cropper.getCroppedCanvas({ //使用canvas绘制一个宽和高200的图片
width: 200,
height: 200,
});
$('#imga').attr("src", canvas.toDataURL("image/png", 0.3)) //使用canvas toDataURL方法把图片转换为base64格式
}
});
因为实例化时候image必须是DOM节点，而jquery获取到的是jquery对象，如果要用jquery会报错。

因为后台不接受base64编码，所以先把base64转换为文件：

//将base64格式图片转换为文件形式
function dataURLtoBlob(dataurl) {
var arr = 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 Blob([u8arr], { type: mime });
}
使用formData对象上传文件，由于转换后的文件没有文件名，如果不添加文件名上传会报错：

var file = dataURLtoBlob($('#imga').attr("src")); //将base64格式图片转换为文件形式
var formData = new FormData();
var newImg = new Date().getTime() + '.png'; //给图片添加文件名 如果没有文件名会报错
formData.append('file', file, newImg) //formData对象添加文件
$.ajax({
type: "POST",
url: url + "/res/upload",
data: formData,
processData: false, // 不处理数据
contentType: false, // 不设置内容类型
success: function (data) {
var data = JSON.parse(data);
}
})

使用ajax上传是注意要把processData，contentType参数设置为false，不然会报错