1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
|
---
title: HTMLCanvasElement.toBlob()
slug: Web/API/HTMLCanvasElement/toBlob
translation_of: Web/API/HTMLCanvasElement/toBlob
---
<div>
<div>
<div>{{APIRef("Canvas API")}}</div>
</div>
</div>
<p>Метод <strong><code>HTMLCanvasElement.toBlob()</code></strong> создаёт объект {{domxref("Blob")}} представляющий изображение, содержащееся в <code>canvas</code>; этот файл может быть закеширован на диске или храниться в памяти на усмотрение пользователя (<em>at the discretion of the user agent</em>). Если параметр <code>mimeType</code> не определён, типом изображения считается <code>image/png</code>. Созданное изображение имеет разрешение 96dpi.</p>
<p>Третий аргумент используется для изображений с MIME-типом <code>image/jpeg</code> для определения его качества.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox">void <var>canvas</var>.toBlob(<var>callback</var>, <var>mimeType</var>, <var>qualityArgument</var>);
</pre>
<h3 id="Параметры">Параметры</h3>
<dl>
<dt>callback</dt>
<dd>Callback-функция с результирующим объектом {{domxref("Blob")}} в качестве единственного аргумента.</dd>
<dt><code>mimeType</code> {{optional_inline}}</dt>
<dd>Аргумент типа {{domxref("DOMString")}} определяющий формат изображения. По умолчанию <code>image/png</code>.</dd>
<dt><code>qualityArgument</code> {{optional_inline}}</dt>
<dd>Аргумент типа {{jsxref("Number")}} со значением от <code>0</code> до <code>1</code>, определяющий качество изображения, если заявлен MIME-тип <code>image/jpeg</code> или <code>image/webp</code>. Если этот аргумент содержит нечто иное, для определения качества изображения будет использовано значение по умолчанию. Остальные аргументы проигнорируются.</dd>
</dl>
<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
<p>Не возвращает ничего.</p>
<h2 id="Примеры">Примеры</h2>
<h3 id="Получение_файла_представленного_в_canvas">Получение файла, представленного в canvas</h3>
<p>Как только вы нарисовали содержимое в <code>canvas</code>, вы можете сконвертировать его в файл изображения любого поддерживаемого формата. Ниже приведён фрагмент кода, для примера, принимает изображение в элементе {{HTMLElement("canvas")}} с ID = "canvas" и получает его копию в виде PNG изображения, затем добавляет в документ новый элемент {{HTMLElement("img")}}, исходное изображение которого создано с помощью холста.</p>
<pre class="brush: js">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);
});
</pre>
<p>Обратите внимание, что здесь мы создаём изображение PNG; если вы добавите второй параметр в вызов <code>toBlob()</code>, вы сможете определить тип необходимого изображения. Например, чтобы получить изображение в формате JPEG:</p>
<pre class="brush: js"> canvas.toBlob(function(blob){...}, 'image/jpeg', 0.95); // JPEG в 95% качестве</pre>
<div>
<h3 id="A_way_to_convert_a_canvas_to_an_ico_Mozilla_only">A way to convert a canvas to an ico (Mozilla only)</h3>
<p>Это использует <code>-moz-parse</code> для преобразования cnavas в ICO. Windows XP не поддерживает преобразование из PNG в ico, поэтому вместо этого использует bmp. Ссылка для загрузки создаётся путём установки атрибута загрузки. Значение атрибута загрузки - это имя, которое он будет использовать в качестве имени файла.</p>
<pre class="brush: js">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');</pre>
</div>
<h3 id="Сохранение_toBlob_на_диске_ОСchromeadd-on_context_only">Сохранение toBlob на диске ОС(chrome/add-on context only)</h3>
<div class="note">
<p>Этот метод сохраняет его на рабочем столе и полезен только в контексте Firefox chrome или дополнительном коде, поскольку API ОС не присутствуют на веб-сайтах.</p>
</div>
<pre class="brush: js">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');</pre>
<h2 id="Спецификации">Спецификации</h2>
{{Specifications}}
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p>{{Compat}}</p>
<h2 id="Полифил">Полифил</h2>
<p>Полифил, основанный на toDataURL, со слабой производительностью.</p>
<pre>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'} ) );
});
}
});
}</pre>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>The interface defining it, {{domxref("HTMLCanvasElement")}}.</li>
<li>{{domxref("Blob")}}</li>
</ul>
|
