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()導出圖片。

　　具體操作代碼及效果如下：