在工作中遇到了奇怪的问题，在此记录。
一、定义
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虽然会使得生成的文件大小缩小，但有兼容性问题。
标签：文件大小,canvas,image,javascript,jpeg,toDataURL,type From： https://www.cnblogs.com/lishuxuan/p/17045515.html