canvas toDataURL() 方法如何生成部分畫布內容的圖片
摘要：
HTMLCanvasElement.toDataURL()
方法返回一個包含圖片展示的 data URI
。可以使用 type
引數其型別，預設為 PNG
格式。圖片的解析度為96dpi。
。
語法
<var> c...
HTMLCanvasElement.toDataURL()
方法返回一個包含圖片展示的 HTTP/data_URIs" rel="nofollow,noindex" target="_blank">data URI
。可以使用 type
引數其型別，預設為 PNG
格式。圖片的解析度為96dpi。
。
語法
<var> canvas.toDataURL(type, encoderOptions);</var>
引數
type可選
圖片格式，預設為 image/png
encoderOptions可選
在指定圖片格式為 image/jpeg 或
image/webp的情況下，可以從 0 到 1 的區間內選擇圖片的質量
。如果超出取值範圍，將會使用預設值 0.92
。其他引數會被忽略。
返回值
包含 data URI
的API/DOMString" rel="nofollow,noindex" target="_blank">
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()匯出圖片。
具體操作程式碼及效果如下：