最近根据需求做了一个图片裁剪的功能,于是在Git上找了cropper这个插件,具体api网上有很多资料,大家感兴趣的可以自行查找,这次主要记录下我遇到的问题。
图片裁剪完成后cropper有个方法可以生成裁剪后的图片,这些在前台就可以完成,比后台处理方便很多。
$("#getCroppedCanvas").on("click", function () {
console.log($('#image').cropper('getCroppedCanvas'));;
var cas=$('#image').cropper('getCroppedCanvas');
var base64url=cas.toDataURL('image/jpeg');
cas.toBlob(function (e) {
console.log(e); //生成Blob的图片格式
})
console.log(base64url); //生成base64图片的格式
$('.cavans').html(cas) //在body显示出canvas元素
})
$('#image').cropper('getCroppedCanvas', {
width: 160,
height: 90,
minWidth: 256,
minHeight: 256,
maxWidth: 4096,
maxHeight: 4096,
fillColor: '#fff',
imageSmoothingEnabled: false,
imageSmoothingQuality: 'high',
});
这里可以生成base64格式,也可以生成blob格式。
首先我使用的是base64格式往后台传,但是,实在是太长了,截个图感受一下
导致网络间传输很慢。那就改用blob格式吧, 然鹅,直接用上面的方法生成blob对象不能用,反正就是到处报错,因为生成的blob对象没文件名,需要手动给它赋值,这样:
cas.toBlob(function (e) {
console.log(e); //生成Blob的图片格式
var timestamp = Date.parse(new Date());
e.name=timestamp+".png";
parent.previewPic(e,num);
parent.layer.closeAll();
})
好了,终于可以传给后台了,结果又出现了另一个问题,
what the fuck!我一个1M多的图片裁剪完后变成了十几M,开啥玩笑,然后又上网翻资料,好吧,生成blob对象的时候默认是生成高质量的png,只要在生成的时候指定一下格式就行了,toBlob方法有三个参数,第二个就是图片格式了,
cas.toBlob(function (e) {
console.log(e); //生成Blob的图片格式
var timestamp = Date.parse(new Date());
e.name=timestamp+".jpeg";
parent.previewPic(e,num);
parent.layer.closeAll();
},'image/jpeg')
换成JPEG格式的就没问题了。
ps:前台只要不是换了新页面,那么全局参数在父页面子页面都可以修改或者调用,这个属性可以解决很多问题!
补充:
话说IE不支持toBlob()方法,所以IE下需要下一个js插件,具体忘了是啥,周一再更,今天下班了。