t.cn
wonders
前端攻城狮
|
不知名互联网
唱歌打游戏
获得徽章 0
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇沸点
赞了这篇文章
赞了这篇沸点
「每天一点点🕐」【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）。
前端通常会利用 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）。
展开
评论
23
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇沸点
学完你可能会想起遗忘已久的线性代数
赞了这篇文章
赞了这篇文章