【javascript】关于 canvas.toDataURL()

在工作中遇到了奇怪的问题，在此记录。

---

一、定义

canvas.toDataURL()方法是返回一个包含图片展示的 数据URL。可以使用 type 参数其类型，默认为 PNG格式，图片的分辨率为96dpi。

二、语法

canvas.toDataURL(type,encoderOptions)

三、参数

1、type：图片格式，默认为 image/png,可以是其他image/jpeg等

2、encoderOptions：0到1之间的取值，主要用来选定图片的质量，默认值是0.92，超出范围也会选择默认值。

四、返回值

返回值是一个数据url，是base64组成的图片的源数据、可以直接赋值给图片的src属性。

---

需求：有张显示在网页上的图像，需要作为文件参数传给后端

方法：先通过canvas.toDataURL()转为base64，再使用 base64ConvertFile()转成文件

问题：在使用canvas.toDataURL()方法时，选择不同type，最终生成文件大小有很大区别。

实验：原图为大小为411kb的jpeg图像，type选择image/png，最终文件大小为6.3M，type选择image/jpeg，最终文件大小为6.3M,type选择image/jpeg，最终文件大小为667k,type选择image/webp，最终文件大小为381k。选择其他类型的图像格式会使用默认值image/png。

结论：使用png会使最终生成的文件大小扩大十倍，原图为jpeg格式，那么这边最好也使用jpeg格式，使用jpeg图像大小会变大6%左右，webp虽然会使得生成的文件大小缩小，但有兼容性问题。