我的處女作《Canvas系列教程》在我的Github上正在連載更新，希望能得到您的關注和支持，讓我有更多的動力進行創作。
教程介紹、教程目錄等能在README裏查閱。
傳送門：https://github.com/827652549/CanvasStudy
HTMLCanvasElement.toBlob() 方法創造Blob對象，用以展示canvas上的圖片；這個圖片文件可以被緩存或保存到本地，由用戶代理端自行決定。如不特別指明，圖片的類型默認爲 image/png，分辨率爲96dpi。
第三個參數用於針對image/jpeg格式的圖片進行輸出圖片的質量設置。
語法
canvas.toBlob(callback, type, encoderOptions);
參數
callback
回調函數，可獲得一個單獨的Blob對象參數。
type 可選
DOMString類型，指定圖片格式，默認格式爲image/png。
encoderOptions 可選
Number類型，值在0與1之間，當請求圖片格式爲image/jpeg或者image/webp時用來指定圖片展示質量。如果這個參數的值不在指定類型與範圍之內，則使用默認值，其餘參數將被忽略。
返回值
無。
異常
SecurityError
canvas“被污染”的情況下不能使用此方法
示例：將canvas圖像轉化爲文件
當一個內容畫到canvas上時，我們可以將它生成任何一個格式支持的圖片文件。比如，下面的代碼段獲得了id爲“canvas”的<canvas>元素中的圖像，複製成一個PNG圖，在文檔中加入一個新的<img>元素，這個<img>元素的源圖就是使用canvas創建的那個圖像。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas對象的toBlob方法示例</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
//獲取canvas元素
var canvas = document.getElementById("canvas");
//第一個參數是回調函數
canvas.toBlob(
//傳入blob對象
function (blob) {
//創建一個img標籤
var newImg = document.createElement("img"),
//以blob對象爲基礎創建一個url
url = URL.createObjectURL(blob);
console.log(url);
//blob:http://localhost:63342/d869ed9c-cad0-49f9-9965-e9959a15e0c0
console.log(blob);
//返回一個BLOB對象
//加載後銷燬
newImg.onload = function () {
// no longer need to read the blob so it's revoked
URL.revokeObjectURL(url);
};
//img標籤屬性賦值
newImg.src = url;
//添加爲子元素
document.body.appendChild(newImg);
});
</script>
</html>