cropper.js自带的blob转换方法的坑

  • 在使用cropper.js,在获取canvas里面的数据时,用于转换的blob的方法:

   $('.img').cropper('getCroppedCanvas').toblob(function(blob){})

所产生的二进制数据会比截图到的区域大了很多,默认了转换后是png格式,以及图片质量,导致截取出的图片体积非常大,这就给上传增加了很多的成本,后面的解决办法就是获取此时画取的canvas对象,使用

   dataURL=canvas.toDataURL('image/jpeg'); 
   var blob = dataURLtoBlob(dataURL);

来获得对应的blob从而减少其封装的方法转换带来的数据变大问题,或者就是原来的toblob方法:

   canvas.toBlob(function(blob){...}, "image/jpeg", 0.95);

还有一种就是上传原来的图片,根据截取获取的相对截取开始点位置以及截取的长宽对原图进行重绘得到的原始数据来规避这种操作。但是实际生产是能尽量少传网络数据就少传,所以还是由用户的机器去承担这个消耗。


猜你喜欢

转载自blog.51cto.com/13950217/2168965
今日推荐