返回

浏览器端图片压缩

一、

用手机拍一张照片上传到服务器是经常碰到的需求,因为手机拍照后的图片容量很大,不仅消耗了带宽而且也拖慢了图片的上传速度。

二、

有一种方法是在上传图片前将图片的尺寸大小改变,简单来说是这么几个步骤:

  • 用 HTML5 FileReader API 将图片读取出来
  • 根据读取到的数据创建 blob 对象,然后通过 URL.createObjectURL() 获取链接
  • 根据上一步链接创建一个新的 image 元素
  • 将这个 image 元素交给 canvas 元素,然后改变 canvas 的尺寸
  • 使用 canvas.toDataURL("image/jpeg",0.7) 获取编码后的 base64 代码发送给后端,如果使用 FormData 可以将编码重新转换成 blob 对象再提交