HTMLCanvasElement.toDataURL()
方法返回一个包含图片展示的 data URI 。可以使用 type
参数其类型,默认为 PNG 格式。图片的分辨率为96dpi。
。
canvas.toDataURL(type, encoderOptions);
type可选图片格式,默认为 image/png
encoderOptions可选在指定图片格式为 image/jpeg 或
image/webp的情况下,可以从 0 到 1 的区间内选择图片的质量
。如果超出取值范围,将会使用默认值 0.92
。其他参数会被忽略。
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);
toDataURL() 是将整个canvas的内容导出,很多时候我们只需要截图canvas中的部分内容,这个时候可以通过 getImageData() 复制画布上指定矩形的像素数据,然后通过 putImageData() 将图像数据放回某个设定了图片相同尺寸的新画布中,然后再使用toDataURL()导出图片。
具体操作代码及效果如下: