「每天一点点🕐」【HTMLCanvasElement.to - 沸点

前端

「每天一点点🕐」【HTMLCanvasElement.toBlob() 方法需兼容】
前端通常会利用 Canvas 的图片绘制、裁剪、宽高等比压缩等能力，对图片进行处理，利用 Canvas 的 toDataURL 或 toBlob 方法，进行处理后的输出；且这两种方法可进一步控制图片类型和图片质量。

toDataURL 方法特点：
1、用法：canvas.toDataURL(mimeType, qualityArgument)；
2、返回一个数据URL（data:[<mediatype>][;base64],<data>）；
3、数据存储大小比原图片大33.3%（通过Base64编码，原来的3个字节编码后将成为4个字节，即字节增加了33.3%）；
4、同步执行；
5、浏览器支持相对较好（见图1）；

toBlob 方法特点：
1、用法：canvas.toBlob(callback, mimeType, qualityArgument)；
2、返回一个 Blob对象（可以得到图片存储大小 size ，图片类型 type 等属性）；
3、异步执行，返回一个回调函数，且 Blob对象作为唯一参数；
4、

需要对浏览器做兼容（见图2、3）。

展开

今天学到了

等人赞过