## 第一课时：`toDataURL()` `<canvas>`元素的`toDataURL()`方法，可以将 Canvas 数据转为 Data URI 格式的图像。 ~~~ canvas.toDataURL(type, quality) ~~~ `toDataURL()`方法接受两个参数。 * type：字符串，表示图像的格式。默认为`image/png`，另一个可用的值是`image/jpeg`，Chrome 浏览器还可以使用`image/webp`。 * quality：浮点数，0到1之间，表示 JPEG 和 WebP 图像的质量系数，默认值为0.92。 该方法的返回值是一个 Data URI 格式的字符串。 ~~~ function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL('image/png'); return image; } ~~~ 上面的代码将`<canvas>`元素，转化成PNG Data URI。 ~~~ var fullQuality = canvas.toDataURL('image/jpeg', 0.9); var mediumQuality = canvas.toDataURL('image/jpeg', 0.6); var lowQuality = canvas.toDataURL('image/jpeg', 0.3); ~~~ 上面代码将`<canvas>`元素转成高画质、中画质、低画质三种 JPEG 图像。