除了CanvasRenderingContext2D对象提供的方法，``元素本身也有自己的方法。
1.4.1. HTMLCanvasElement.toDataURL()
``元素的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;
}
上面的代码将``元素，转化成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);
上面代码将``元素转成高画质、中画质、低画质三种 JPEG 图像。
1.4.2. HTMLCanvasElement.toBlob()
HTMLCanvasElement.toBlob()方法用于将``图像转成一个 Blob 对象，默认类型是image/png。它的使用格式如下。
// 格式
canvas.toBlob(callback, mimeType, quality)
// 示例
canvas.toBlob(function (blob) {...}, 'image/jpeg', 0.95)
toBlob()方法可以接受三个参数。
- callback：回调函数。它接受生成的 Blob 对象作为参数。
- mimeType：字符串，图像的 MIMEType 类型，默认是
image/png。 - quality：浮点数，0到1之间，表示图像的质量，只对
image/jpeg和image/webp类型的图像有效。
注意，该方法没有返回值。下面的例子将图像复制成图像。
var canvas = document.getElementById('myCanvas');
function blobToImg(blob) {
var newImg = document.createElement('img');
var url = URL.createObjectURL(blob);
newImg.onload = function () {
// 使用完毕，释放 URL 对象
URL.revokeObjectURL(url);
};
newImg.src = url;
document.body.appendChild(newImg);
}
canvas.toBlob(blobToImg);