canvas toDataURL() 方法如何生成部分画布内容的图片

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

• 如果画布的高度或宽度是0，那么会返回字符串"data:,"。
• 如果传入的类型非"image/png"，但是返回的值以"data:image/png"开头，那么该传入的类型是不支持的。
• Chrome支持"image/webp"类型。

语法

　　canvas.toDataURL(type, encoderOptions);

参数

　　type可选图片格式，默认为 image/png

　　encoderOptions可选在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

返回值

　　包含 data URI 的DOMString。

示例

　　简单生成图片

var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"

　　设置图片质量

var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
var lowQuality = canvas.toDataURL("image/jpeg", 0.1);

　　截取canvas部分内容

　　toDataURL() 是将整个canvas的内容导出，很多时候我们只需要截图canvas中的部分内容，这个时候可以通过 getImageData() 复制画布上指定矩形的像素数据，然后通过 putImageData() 将图像数据放回某个设定了图片相同尺寸的新画布中，然后再使用toDataURL()导出图片。

　　具体操作代码及效果如下：