The HTMLCanvasElement.toBlob() method creates a Blob object representing the image contained in the canvas. This file may be cached on the disk or stored in memory at the discretion of the user agent.
The desired file format and image quality may be specified. If the file format is not specified, or if the given format is not supported, then the data will be exported as image/png. Browsers are required to support image/png; many will support additional formats including image/jpeg and image/webp.
The created image will have a resolution of 96dpi for file formats that support encoding resolution metadata.
toBlob(callback)
toBlob(callback, type)
toBlob(callback, type, quality)
Once you have drawn content into a canvas, you can convert it into a file of any supported image format. The code snippet below, for example, takes the image in the <canvas> element whose ID is "canvas", obtains a copy of it as a PNG image, then appends a new <img> element to the document, whose source image is the one created using the canvas.
const canvas = document.getElementById("canvas");
canvas.toBlob((blob) => {
const newImg = document.createElement("img");
const url = URL.createObjectURL(blob);
newImg.onload = () => {
URL.revokeObjectURL(url);
};
newImg.src = url;
document.body.appendChild(newImg);
});
Note that here we're creating a PNG image; if you add a second parameter to the toBlob() call, you can specify another image type supported by the user agent. For example, to get the image in JPEG format:
canvas.toBlob(
(blob) => {
},
"image/jpeg",
0.95,
);
This uses -moz-parse to convert the canvas to ico, and hence only works on Firefox. Windows XP doesn't support converting from PNG to ico, so it uses bmp instead. A download link is created by setting the download attribute. The value of the download attribute is the name it will use as the file name.
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",
);
Note: This technique saves it to the desktop and is only useful in Firefox chrome context or add-on code, as OS APIs are not present on websites.
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 = () => {
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",
);