HTMLCanvasElement: toBlob() 方法
HTMLCanvasElement.toBlob() 方法建立一個表示畫布中影像的 Blob 物件。此檔案可能由使用者代理決定快取在磁碟上或儲存在記憶體中。
可以指定所需的檔案格式和影像質量。如果未指定檔案格式，或者給定的格式不受支援，則資料將匯出為 image/png。瀏覽器必須支援 image/png；許多瀏覽器還將支援其他格式，包括 image/jpeg 和 image/webp。
對於支援編碼解析度元資料的檔案格式，建立的影像解析度為 96dpi。
語法
toBlob(callback)
toBlob(callback, type)
toBlob(callback, type, quality)
引數
回撥-
一個回撥函式，以包含
Blob物件的單個引數。如果由於任何原因無法建立影像，則可以傳遞null。 type可選-
一個字串，指示影像格式。預設型別為
image/png；如果給定的型別不受支援，也將使用該型別。 quality可選-
一個介於
0和1之間的Number，指示在使用支援有失真壓縮的檔案格式（如image/jpeg或image/webp）建立影像時要使用的影像質量。如果未指定此選項，或者該數字超出了允許的範圍，則使用者代理將使用其預設質量值。
返回值
無（undefined）。
異常
SecurityError-
畫布的點陣圖不是原始的；至少部分內容已從與文件載入源相同的站點載入，或者可能已從其他站點載入。
示例
獲取表示畫布的檔案
將內容繪製到畫布後，您可以將其轉換為任何支援的影像格式的檔案。例如，下面的程式碼片段獲取 ID 為“canvas”的 <canvas> 元素中的影像，將其作為 PNG 影像獲取副本，然後將一個新的 <img> 元素附加到文件中，其源影像就是使用畫布建立的。
const canvas = document.getElementById("canvas");
canvas.toBlob((blob) => {
const newImg = document.createElement("img");
const url = URL.createObjectURL(blob);
newImg.src = url;
document.body.appendChild(newImg);
});
請注意，此處我們建立的是 PNG 影像；如果您向 toBlob() 呼叫新增第二個引數，您可以指定使用者代理支援的另一種影像型別。例如，要以 JPEG 格式獲取影像
canvas.toBlob(
(blob) => {
/* … */
},
"image/jpeg",
0.95,
); // JPEG at 95% quality
請注意，我們不會在影像載入後立即撤銷物件 URL，因為這樣做會使影像無法用於使用者互動（例如右鍵單擊儲存影像或在新標籤頁中開啟它）。對於長期執行的應用程式，您應該在不再需要物件 URL 時撤銷它們（例如，當影像從 DOM 中移除時），透過呼叫 URL.revokeObjectURL() 方法並將物件 URL 字串作為引數傳遞來釋放記憶體。
將 Canvas 轉換為 ico (僅限 Mozilla)
這使用 -moz-parse 將 Canvas 轉換為 ico，因此僅在 Firefox 中有效。Windows XP 不支援從 PNG 轉換為 ico，因此它改用 bmp。透過設定 download 屬性來建立下載連結。download 屬性的值是它將用作檔名。
const canvas = document.getElementById("canvas");
const d = canvas.width;
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(d / 2, 0);
ctx.lineTo(d, d);
ctx.lineTo(0, d);
ctx.closePath();
ctx.fillStyle = "yellow";
ctx.fill();
function blobCallback(iconName) {
return (b) => {
const a = document.createElement("a");
a.textContent = "Download";
document.body.appendChild(a);
a.style.display = "block";
a.download = `${iconName}.ico`;
a.href = window.URL.createObjectURL(b);
};
}
canvas.toBlob(
blobCallback("passThisString"),
"image/vnd.microsoft.icon",
"-moz-parse-options:format=bmp;bpp=32",
);
使用 OS.File 將 toBlob 儲存到磁碟 (僅 Chrome/附加元件上下文)
注意：此技術將其儲存到桌面，並且僅在 Firefox chrome 上下文或附加元件程式碼中有用，因為網站上不存在 OS API。
const canvas = document.getElementById("canvas");
const d = canvas.width;
ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(d / 2, 0);
ctx.lineTo(d, d);
ctx.lineTo(0, d);
ctx.closePath();
ctx.fillStyle = "yellow";
ctx.fill();
function blobCallback(iconName) {
return (b) => {
const r = new FileReader();
r.onloadend = () => {
// r.result contains the ArrayBuffer.
Cu.import("resource://gre/modules/osfile.jsm");
const writePath = OS.Path.join(
OS.Constants.Path.desktopDir,
`${iconName}.ico`,
);
const promise = OS.File.writeAtomic(writePath, new Uint8Array(r.result), {
tmpPath: `${writePath}.tmp`,
});
promise.then(
() => {
console.log("successfully wrote file");
},
() => {
console.log("failure writing file");
},
);
};
r.readAsArrayBuffer(b);
};
}
canvas.toBlob(
blobCallback("passThisString"),
"image/vnd.microsoft.icon",
"-moz-parse-options:format=bmp;bpp=32",
);
規範
| 規範 |
|---|
| HTML # dom-canvas-toblob-dev |
瀏覽器相容性
載入中…