大体的思路是,部分API的兼容性请参照caniuse:
- 利用FileReader,读取
blob对象
,或者是file对象
,将图片转化为data uri
的形式。 - 使用
canvas
,在页面上新建一个画布,利用canvas
提供的API,将图片画入这个画布当中。 - 利用
canvas.toDataURL()
,进行图片的压缩,得到图片的data uri
的值 - 上传文件。
步骤1当中,在进行图片压缩前,还是对图片大小做了判断的,如果图片大小大于200KB时,是直接进行图片上传,不进行图片的压缩,如果图片的大小是大于200KB,则是先进行图片的压缩再上传: