HTMLCanvasElement.toBlob()
Метод 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