图片压缩流程
压缩图片基本流程
- input 读取到 文件 ,使用 FileReader 将其转换为 base64 编码
- 新建 img ,使其 src 指向刚刚的 base64
- 新建 canvas ,将 img 画到 canvas 上
- 利用 canvas.toDataURL/toBlob 将 canvas 导出为 base64 或 Blob
- 将 base64 或 Blob 转化为 File 将这些步骤逐个拆解,我们会发现似乎在canvas.toDataURL时涉及到图片质量,那咱们就从这里下手。
准备
HTMLCanvasElement.toDataURL()
HTMLCanvasElement.toDataURL()
方法返回一个包含图片展示的 data URI 。
可以使用 type 参数其类型,默认为 PNG 格式。
图片的分辨率为96dpi。
- 如果画布的高度或宽度是0,那么会返回字符串
data:,
。 - 如果传入的类型非
image/png
,但是返回的值以data:image/png
开头,那么该传入的类型是不支持的。
语法
canvas.toDataURL(type, encoderOptions);
参数
type 可选 图片格式,默认为 image/png
encoderOptions 可选 在指定图片格式为
image/jpeg
或image/webp
的情况下,可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值
0.92
。其他参数会被忽略。 Chrome支持image/webp
类型。
JS
压缩比例在0.9
以下都会明显的文件变小,建议0.8
。
1 |
|
TS版本
1 | const fileToDataURL = (file: Blob): Promise<any> => { |