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. If
type
is not specified, the image type is
image/png
. The created image is in a resolution of 96dpi.
The third argument is used when creating images using lossy compression (namely,
image/jpeg
) to specify the quality of the output.
canvas.toBlob(callback, mimeType, qualityArgument);
callback
Blob
object as a single argument.
mimeType
可选
DOMString
indicating the image format. The default type is
image/png
.
qualityArgument
可选
Number
between
0
and
1
indicating image quality if the requested type is
image/jpeg
or
image/webp
. If this argument is anything else, the default values 0.92 and 0.80 are used for image/jpeg and image/webp respectively. Other arguments are ignored.
None.
SecurityError
The canvas's bitmap is not origin clean; at least some of its contents come from secure
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.
var canvas = document.getElementById('canvas');
canvas.toBlob(function(blob) {
var newImg = document.createElement('img'),
url = URL.createObjectURL(blob);
newImg.onload = function() {
// no longer need to read the blob so it's revoked
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 the image type. For example, to get the image in JPEG format:
canvas.toBlob(function(blob){...}, 'image/jpeg', 0.95); // JPEG at 95% quality
This uses
-moz-parse
to convert the canvas to ico. 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.
var canvas = document.getElementById('canvas');
var 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 function(b) {
var 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');
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 web sites.
var canvas = document.getElementById('canvas');
var 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 function(b) {
var r = new FileReader();
r.onloadend = function () {
// r.result contains the ArrayBuffer.
Cu.import('resource://gre/modules/osfile.jsm');
var writePath = OS.Path.join(OS.Constants.Path.desktopDir,
iconName + '.ico');
var promise = OS.File.writeAtomic(writePath, new Uint8Array(r.result),
{tmpPath:writePath + '.tmp'});
promise.then(
function() {
console.log('successfully wrote file');
},
function() {
console.log('failure writing file')
}
);
};
r.readAsArrayBuffer(b);
}
}
canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
'-moz-parse-options:format=bmp;bpp=32');
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of 'HTMLCanvasElement.toBlob' in that specification. |
实时标准 | 无变化从最新快照起， HTML5 |
|
HTML 5.1
The definition of 'HTMLCanvasElement.toBlob' in that specification. |
推荐 | 无变化 |
|
HTML5
The definition of 'HTMLCanvasElement.toBlob' in that specification. |
推荐 | Snapshot of the HTML 实时标准 containing the initial definition. |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
toBlob
|
Chrome 50 |
Edge
79
|
Firefox 19 |
IE
10
Prefixed
|
Opera 37 | Safari 11 | WebView Android 50 | Chrome Android 50 | Firefox Android 4 | Opera Android 37 | Safari iOS 11 | Samsung Internet Android 5.0 |
| Image quality parameter | Chrome 50 | Edge 79 | Firefox 25 | IE No | Opera Yes | Safari No | WebView Android 50 | Chrome Android No | Firefox Android 25 | Opera Android No | Safari iOS No | Samsung Internet Android No |
完整支持
不支持
要求使用供应商前缀或不同名称。
HTMLCanvasElement
.
Blob