h5页面利用canvas压缩图片并上传


由于现在手机拍摄的照片质量较高,为减轻服务器压力在上传图片时需要压缩后再进行上传。h5页面中压缩图片就需要用canvas来实现,通过固定canvas的宽高重绘图片,来达到压缩的目的。



  最后补充一下,canvas.toBlob()的方法会有兼容问题(移动端目前发现问题的地方是某些手机直接拍照上传的时候)

  解决方法:引入了一个blob插件。CDN地址:https://cdn.bootcss.com/javascript-canvas-to-blob/3.14.0/js/canvas-to-blob.js

  还有部分手机上的照片上传之后会被默认旋转,使用插件exif.js可以获取照片旋转角度进行纠正,上方代码已补充。CDN地址:https://cdn.bootcss.com/exif-js/2.3.0/exif.js