HTMLCanvasElement.toBlob()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Метод HTMLCanvasElement.toBlob()
создаёт объект Blob
представляющий изображение, содержащееся в canvas
; этот файл может быть закеширован на диске или храниться в памяти на усмотрение пользователя (at the discretion of the user agent). Если параметр mimeType
не определён, типом изображения считается image/png
. Созданное изображение имеет разрешение 96dpi.
Третий аргумент используется для изображений с MIME-типом image/jpeg
для определения его качества.
Синтаксис
void canvas.toBlob(callback, mimeType, qualityArgument);
Параметры
- callback
-
Callback-функция с результирующим объектом
Blob
в качестве единственного аргумента. mimeType
Необязательный-
Аргумент типа
DOMString
определяющий формат изображения. По умолчаниюimage/png
. qualityArgument
Необязательный-
Аргумент типа
Number
со значением от0
до1
, определяющий качество изображения, если заявлен MIME-типimage/jpeg
илиimage/webp
. Если этот аргумент содержит нечто иное, для определения качества изображения будет использовано значение по умолчанию. Остальные аргументы проигнорируются.
Возвращаемое значение
Не возвращает ничего.
Примеры
Получение файла, представленного в canvas
Как только вы нарисовали содержимое в canvas
, вы можете сконвертировать его в файл изображения любого поддерживаемого формата. Ниже приведён фрагмент кода, для примера, принимает изображение в элементе <canvas>
с ID = "canvas" и получает его копию в виде PNG изображения, затем добавляет в документ новый элемент <img>
, исходное изображение которого создано с помощью холста.
var canvas = document.getElementById("canvas");
canvas.toBlob(function (blob) {
var newImg = document.createElement("img"),
url = URL.createObjectURL(blob);
newImg.onload = function () {
// больше не нужно читать blob, поэтому он отменён
URL.revokeObjectURL(url);
};
newImg.src = url;
document.body.appendChild(newImg);
});
Обратите внимание, что здесь мы создаём изображение PNG; если вы добавите второй параметр в вызов toBlob()
, вы сможете определить тип необходимого изображения. Например, чтобы получить изображение в формате JPEG:
canvas.toBlob(function(blob){...}, 'image/jpeg', 0.95); // JPEG в 95% качестве
A way to convert a canvas to an ico (Mozilla only)
Это использует -moz-parse
для преобразования cnavas в ICO. Windows XP не поддерживает преобразование из PNG в ico, поэтому вместо этого использует bmp. Ссылка для загрузки создаётся путём установки атрибута загрузки. Значение атрибута загрузки - это имя, которое он будет использовать в качестве имени файла.
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",
);
Сохранение toBlob на диске ОС(chrome/add-on context only)
Примечание: Этот метод сохраняет его на рабочем столе и полезен только в контексте Firefox chrome или дополнительном коде, поскольку API ОС не присутствуют на веб-сайтах.
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",
);
Спецификации
Specification |
---|
HTML Standard # dom-canvas-toblob-dev |
Совместимость с браузерами
BCD tables only load in the browser
Полифил
Полифил, основанный на toDataURL, со слабой производительностью.
if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, "toBlob", {
value: function (callback, type, quality) {
var dataURL = this.toDataURL(type, quality).split(",")[1];
setTimeout(function () {
var binStr = atob(dataURL),
len = binStr.length,
arr = new Uint8Array(len);
for (var i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
callback(new Blob([arr], { type: type || "image/png" }));
});
},
});
}
Смотрите также
- The interface defining it,
HTMLCanvasElement
. Blob