今日学习知识点-canvas的toDataURL()方法

首先复习一下base64位编码，有时我们会先将图片转化为base64格式的情况，这样的好处是减少一张图片的http请求，但是相应的缺点就是转换之后会导致css文件体积增大，而css的体积会影响页面渲染，因此会导致白屏时间长。

进入今天的学习重点

1.toDataURL()有什么作用

toDataURL()是canvas对象的一种方法，用于将canvas对象转换为base64位编码；

2.如何使用

canvas.toDataURL(type, encoderOptions);

type:指定转换为base64编码后图片的格式，如：image/png、image/jpeg、image/webp等等，默认为image/png格式；

encoderOptions:用于设置转换为base64编码后图片的质量，取值范围为0-1，超出取值范围用默认值0.92代替；

3.返回值

它返回一个包含图像表示字符串，可以作为图片的源值使用

注：如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。