👨🏫图片压缩Canvas
关于如何实现压缩
查阅MDN找到的是这个API：
HTMLCanvasElement.toBlob()方法创造Blob对象
用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。如不特别指明，图片的类型默认为 image/png，分辨率为96dpi。
callback处理blob主要，type图片类型，encoderOptions图片压缩比例 0-1
canvas.toBlob(callback, type, encoderOptions);
这里看到压缩效果已经由原来的8.5Mb到了1.6Mb左右,这里有个问题Mac上面的压缩效果没Win好(尴尬了)。
实现代码
流程
1.new FileReader()
首先需要的是利用这个API来读取文件，实例化之后采用 readAsDataURL 的方式来读取图片的资源路径,这里的兼容性不错，囊阔了几乎所有浏览器版本和平台。
reader.readAsDataURL(file);
这样读取图片，上述例子可以多选操作，所以循环了下
2.reader.onload的回调中创建图片
创建图片内容constimg =newImage();
将图片地址绑定到base64,这里遇到一个问题采用event.target.result取不到当前，reader下面有result属性可用img.src = reader.result;
3.创建画布，绘制图片内容
4.划重点压缩，将canvas压缩大小转为image对象
