canvas实现图片压缩

1、 Canvas 的绘图能力，通过调整图片的分辨率或者绘图质量来达到图片压缩的效果，实现思路如下：

• 获取上传 Input 中的图片对象 File
• 将图片转换成 base64 格式
• base64 编码的图片通过 Canvas 转换压缩，这里会用到的 Canvas 的 drawImage 以及 toDataURL 这两个 Api，一个调节图片的分辨率的，一个是调节图片压缩质量并且输出的，后续会有详细介绍
• 转换后的图片生成对应的新图片，然后输出

2、代码实现

    
    提交
    兼容 IE 下载
    
    

代码解析：

 读取文件的时候，新建一个image元素，把src赋值为文件流的target.result;当图片加载的时候，用canvas来绘制图形

建立一个 Image 对象，一个 canvas 画布，设定自己想要下载的图片尺寸，调用 drawImage 方法在 canvas 中绘制上传的图片

，最后用调用 canvas 的 toDataURL 方法可以输出 base64 格式的图片；

canvas.toDataURL(`image/${type}`)

base-64 解码使用方法是 atob()。

window.atob(encodedStr)

unit8Array

new Uint8Array(length)

 静态方法会创建一个 DOMString。用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。

URL.createObjectURL(blob);

A标签的下载

 下载 

3、下载的图片大小