From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../api/htmlcanvaselement/capturestream/index.html | 129 ++++++++++ .../api/htmlcanvaselement/getcontext/index.html | 270 +++++++++++++++++++++ files/ru/web/api/htmlcanvaselement/index.html | 247 +++++++++++++++++++ .../ru/web/api/htmlcanvaselement/toblob/index.html | 266 ++++++++++++++++++++ 4 files changed, 912 insertions(+) create mode 100644 files/ru/web/api/htmlcanvaselement/capturestream/index.html create mode 100644 files/ru/web/api/htmlcanvaselement/getcontext/index.html create mode 100644 files/ru/web/api/htmlcanvaselement/index.html create mode 100644 files/ru/web/api/htmlcanvaselement/toblob/index.html (limited to 'files/ru/web/api/htmlcanvaselement') diff --git a/files/ru/web/api/htmlcanvaselement/capturestream/index.html b/files/ru/web/api/htmlcanvaselement/capturestream/index.html new file mode 100644 index 0000000000..9240255f86 --- /dev/null +++ b/files/ru/web/api/htmlcanvaselement/capturestream/index.html @@ -0,0 +1,129 @@ +--- +title: HTMLCanvasElement.captureStream() +slug: Web/API/HTMLCanvasElement/captureStream +translation_of: Web/API/HTMLCanvasElement/captureStream +--- +
{{APIRef("Media Capture and Streams")}}{{SeeCompatTable}}
+ +

HTMLCanvasElement.captureStream() метод возвращает {{domxref("CanvasCaptureMediaStream")}}, который является видеозахватчиком (оцифровщиком) в реальном времени на поверхности canvas.

+ +

Синтаксис

+ +
MediaStream = canvas.captureStream(frameRate);
+
+ +

Параметры

+ +
+
frameRate {{optional_inline}}
+
Число двойной точности с плавающей точкой, указывающее частоту захвата каждого фрейма. Если не установлено, новый фрейм будет захватываться каждый раз, как canvas изменится; если установлено в 0, будет захвачен один фрейм.
+
+ +

Возвращаемое значение

+ +

Ссылка на {{domxref("MediaStream")}} объект.

+ +

Исключения

+ +
+
NotSupportedError
+
Параметр frameRate имеет отрицательное значение.
+
+ +

Пример

+ +
// Поиск элемента canvas для захвата
+var canvasElt = document.querySelector("canvas");
+
+// Получение потока
+var stream = canvasElt.captureStream(25); // 25 FPS
+
+// Делать что-то с потоком
+// например, отправить что-то другому компьютеру, используя RTCPeerConnection
+//      pc это RTCPeerConnection, созданное где-то еще
+pc.addStream(stream);
+
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Media Capture DOM Elements', '#widl-HTMLCanvasElement-captureStream-CanvasCaptureMediaStream-double-frameRate', 'HTMLCanvasElement.captureStream()')}}{{Spec2('Media Capture DOM Elements')}}Initial definition
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(51.0)}}{{CompatGeckoDesktop(43)}}[1]{{CompatNo}}{{CompatOpera(36.0)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatChrome(51.0)}}{{CompatChrome(51.0)}}{{CompatGeckoMobile(43)}}{{CompatNo}}{{CompatOpera(38)}}{{CompatUnknown}}
+
+ +

[1] In Firefox 41 and 42, this feature was disabled by default; set the preference canvas.capturestream.enabled to true to enable it.

+ +

Смотри так же

+ + diff --git a/files/ru/web/api/htmlcanvaselement/getcontext/index.html b/files/ru/web/api/htmlcanvaselement/getcontext/index.html new file mode 100644 index 0000000000..3ac02908b7 --- /dev/null +++ b/files/ru/web/api/htmlcanvaselement/getcontext/index.html @@ -0,0 +1,270 @@ +--- +title: HTMLCanvasElement.getContext() +slug: Web/API/HTMLCanvasElement/getContext +translation_of: Web/API/HTMLCanvasElement/getContext +--- +
{{APIRef("Canvas API")}}
+ +

Метод HTMLCanvasElement.getContext() возвращает контекст рисования на холсте, или {{jsxref("null")}}, если идентификатор контекста не определен.

+ +

Синтаксис

+ +
canvas.getContext(contextType, contextAttributes);
+
+ +

Параметры

+ +
+
contextType
+
{{domxref("DOMString")}}, содержащий идентификатор контекста, определяющий контекст рисования, связанный с холстом. Возможные значения: +
    +
  • "2d", ведущий к созданию объекта {{domxref("CanvasRenderingContext2D")}}, представляющий двумерный контекст.
    • +
  • "webgl" (или "experimental-webgl"), который будет создавать объект {{domxref("WebGLRenderingContext")}}, представляющий трехмерный контекст. Этот контекст доступен только в браузерах, которые реализуют {{domxref("WebGL")}} первой версии (OpenGL ES 2.0).
    • +
  • "webgl2" (или "experimental-webgl2"), который будет создавать объект {{domxref("WebGL2RenderingContext")}}, представляющий трехмерный контекст. Этот контекст доступен только в браузерах, которые реализуют {{domxref("WebGL")}} второй версии (OpenGL ES 3.0). {{experimental_inline}}
    • +
  • "bitmaprenderer", который позволит создать {{domxref("ImageBitmapRenderingContext")}}, обеспечивающий только функции для замены содержимого холста с заданным {{domxref("ImageBitmap")}}.
    • +
+ +

Примечание: Идентификаторы "experimental-webgl" или "experimental-webgl2" используются в новых реализациях WebGL. Эти реализации не достигли испытательного набора на соответствие или ситуация с графическими драйверами на платформе еще не стабильна The Khronos Group certifies WebGL implementations under certain conformance rules.

+
+
contextAttributes
+
+

Вы можете использовать несколько атрибутов контекста при создании контекста рендеринга, например:

+ + 
canvas.getContext("webgl",
+                 { antialias: false,
+                   depth: false });
+ 2d атрибуты контекста: + +
    +
  • alpha: Логическое значение, означающее, есть ли у холста альфа-канал. Значение false говорит браузеру, что фон холста непрозрачный, что может ускорить рисование прозрачного содержимого и изображений.
    • +
  • {{non-standard_inline}} (Gecko only) willReadFrequently: Boolean that indicates whether or not a lot of read-back operations are planned. This will force the use of a software (instead of hardware accelerated) 2D canvas and can save memory when calling {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} frequently. This option is only available, if the flag gfx.canvas.willReadFrequently.enable is set to true (which, by default, is only the case for B2G/Firefox OS).
    • +
  • {{non-standard_inline}} (Blink only) storage: String that indicates which storage is used ("persistent" by default).
    • +
+ Атрибуты контекста WebGL: + +
    +
  • alpha: Boolean that indicates if the canvas contains an alpha buffer.
    • +
  • depth: Boolean that indicates that the drawing buffer has a depth buffer of at least 16 bits.
    • +
  • stencil: Boolean that indicates that the drawing buffer has a stencil buffer of at least 8 bits.
    • +
  • antialias: Boolean that indicates whether or not to perform anti-aliasing.
    • +
  • premultipliedAlpha: Boolean that indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha.
    • +
  • preserveDrawingBuffer: If the value is true the buffers will not be cleared and will preserve their values until cleared or overwritten by the author.
    • +
  • +

    failIfMajorPerformanceCaveat: Boolean that indicates if a context will be created if the system performance is low.

    +
    • +
+
+
+ +

Возвращаемое значение

+ +

{{domxref("RenderingContext")}}, который представляет собой

+ + + +

Если contextType не соответствует возможному контексту рисунка, то возвращается null.

+ +

Примеры

+ +

Given this {{HTMLElement("canvas")}} element:

+ +
<canvas id="canvas" width="300" height="300"></canvas>
+
+ +

You can get a 2d context of the canvas with the following code:

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+console.log(ctx); // CanvasRenderingContext2D { ... }
+
+ +

Now you have the 2D rendering context for a canvas and you can draw within it.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML5 W3C')}}Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.
+ +

Совместимость браузеров

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (2d context){{CompatChrome(4)}}{{CompatGeckoDesktop("1.9.2")}}{{CompatIE(9)}}{{CompatOpera(9)}}{{CompatSafari(3.1)}}
webgl context{{CompatChrome(9)}}[1]
+ {{CompatChrome(33)}}		{{CompatGeckoDesktop('1.9.2')}}[1]
+ {{CompatGeckoDesktop('24')}}		11.0[2]9.0[3]5.1[2]
webgl2 context {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop('25')}}[4]{{CompatNo}}{{CompatNo}}{{CompatNo}}
2d alpha context attribute32{{CompatGeckoDesktop(30)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+

failIfMajorPerformanceCaveat attribute

+ 		{{CompatVersionUnknown}}{{CompatGeckoDesktop(41)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
bitmaprenderer context{{CompatNo}}{{CompatGeckoDesktop(46)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (2d context){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
webgl context{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
webgl2 context {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
2d alpha context attribute{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(30)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
failIfMajorPerformanceCaveat attribute{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(41)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
bitmaprenderer context{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(46)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Chrome 9 and Gecko 1.9.2 initially implemented this as experimental-webgl. Since Chrome 33 and Gecko 24 it is implemented as the standard webgl.

+ +

[2] Internet Explorer 11, WebKit 5.1 and Firefox Mobile implemented this as experimental-webgl.

+ +

[3] Opera 9 implemented this as experimental-webgl, behind a user preference, in version 15.0 the user preference got removed.

+ +

[4] Gecko 25 implements this as "experimental-webgl2" behind the user preference webgl.enable-prototype-webgl2. Starting with Gecko 42, the string "webgl2" is used behind the same preference.

+ +

Смотри также

+ + diff --git a/files/ru/web/api/htmlcanvaselement/index.html b/files/ru/web/api/htmlcanvaselement/index.html new file mode 100644 index 0000000000..7a2b4d9d2c --- /dev/null +++ b/files/ru/web/api/htmlcanvaselement/index.html @@ -0,0 +1,247 @@ +--- +title: HTMLCanvasElement +slug: Web/API/HTMLCanvasElement +tags: + - API + - Canvas + - HTML DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLCanvasElement +--- +
+
{{APIRef("Canvas API")}}
+
+ +

Интерфейс HTMLCanvasElement предоставляет свойства и методы для управления расположением и представлением элеметов canvas. Он также наследует свойства и методы интерфейса {{domxref("HTMLElement")}}.

+ +

Свойства

+ +

Наследуются от родителя, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLCanvasElement.height")}}
+
Положительное целое число, отражающее HTML-атрибут {{htmlattrxref("height", "canvas")}} элемента {{HTMLElement("canvas")}} (воспринимается в пикселях CSS). Если атрибут не определён или имеет некорректное значение (например отрицательное), используется зачение по умолчанию  — 150.
+
{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}
+
Объект {{jsxref("Boolean")}}, отражающий HTML-атрибут {{htmlattrxref("moz-opaque", "canvas")}} элемента {{HTMLElement("canvas")}}. Сообщает холсту, будет ли присутствовать прозрачность. Если холсту известно, что прозрачность не используется, отрисовка может быть оптимизирована.
+
{{domxref("HTMLCanvasElement.width")}}
+
Положительное целое число, отражающее HTML-атрибут {{htmlattrxref("width", "canvas")}} элемента {{HTMLElement("canvas")}} (воспринимается в пикселях CSS). Если атрибут не определён или имеет некорректное значение (например отрицательное), используется зачение по умолчанию  — 300.
+
{{domxref("HTMLCanvasElement.mozPrintCallback")}}{{non-standard_inline}}
+
Is a function that is Initially null, Web content can set this to a JavaScript function that will be called if the page is printed. This function can then redraw the canvas at a higher resolution that is suitable for the printer being used. See this blog post.
+
+ +

Методы

+ +

Наследуются от родителя, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}
+
Возвращает {{domxref("CanvasCaptureMediaStream")}} — поток видео, которое захватывается в реальном времени с поверхности холста.
+
{{domxref("HTMLCanvasElement.getContext()")}}
+
Возвращает связный с холстом контекст, который позволяет рисовать на холсте. Если context ID не поддерживается, возвращает null. Вызов getContext с параметром "2d" возвращает объект {{domxref("CanvasRenderingContext2D")}}, тогда так вызов с параметром "experimental-webgl" (или "webgl") возвращает объект {{domxref("WebGLRenderingContext")}}. Этот контекст поддерживается толко в браузерах, в которых реализован WebGL.
+
{{domxref("HTMLCanvasElement.toDataURL()")}}
+
Возвращает data-URL, который содержит представление картинки в формате. указанном в параметре type (по умолчанию png). Возвращаемая картинка имеет разрешение 96dpi.
+
{{domxref("HTMLCanvasElement.toBlob()")}}
+
Создаёт объект {{domxref("Blob")}}, представляющий картинку, которая содержится в холсте. Этот файл может быть кэширован на диске или сохранён в памяти наусмотрение user agent.
+
{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}
+
Передаёт управление объекту {{domxref("OffscreenCanvas")}}, либо в main thread либо в worker.
+
{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Возвращает объект {{domxref("File")}} представляющий картинку, которая содержится в холсте. This file is a memory-based file, with the specified name. Если тип не указан, используется image/png.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}{{Spec2('Media Capture DOM Elements')}}Adds the method captureStream().
{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML WHATWG')}}The method getContext() now returns a {{domxref("RenderingContext")}} rather than an opaque object.
+ The methods probablySupportsContext(), setContext() and transferControlToProxy()have been added.
{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (2D context)4.0{{CompatGeckoDesktop('1.9.2')}}9.09.0 [1]3.1
toBlob()50{{CompatGeckoDesktop('19')}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} (bug 71270)
probablySupportsContext(),
+ setContext(),
+ transferControlToProxy() {{experimental_inline}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozGetAsFile() {{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatGeckoDesktop('2')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
captureStream() {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop('41')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
transferControlToOffscreen() {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop(44)}} [3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (2D context)2.1{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}10.0 [1]3.2
webgl context{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} as experimental-webgl{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
toBlob(){{CompatNo}} (bug 67587)50{{CompatGeckoMobile('18')}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} (bug 71270)
probablySupportsContext(),
+ setContext(),
+ transferControlToProxy() {{experimental_inline}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozGetAsFile() {{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('2')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
captureStream() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('41')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
transferControlToOffscreen() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(44)}} [3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Opera Mini 5.0 and later has partial support.

+ +

[2] Support for the third parameter, has been added in Gecko 25 only: when used with the "image/jpeg" type, this argument specifies the image quality.

+ +

[3] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled to true.

+ +

See also

+ + diff --git a/files/ru/web/api/htmlcanvaselement/toblob/index.html b/files/ru/web/api/htmlcanvaselement/toblob/index.html new file mode 100644 index 0000000000..56cd5c0369 --- /dev/null +++ b/files/ru/web/api/htmlcanvaselement/toblob/index.html @@ -0,0 +1,266 @@ +--- +title: HTMLCanvasElement.toBlob() +slug: Web/API/HTMLCanvasElement/toBlob +translation_of: Web/API/HTMLCanvasElement/toBlob +--- +
+
+
{{APIRef("Canvas API")}}
+
+
+ +

Метод HTMLCanvasElement.toBlob() создаёт объект {{domxref("Blob")}} представляющий изображение, содержащееся в canvas; этот файл может быть закеширован на диске или храниться в памяти на усмотрение пользователя (at the discretion of the user agent). Если параметр mimeType не определён, типом изображения считается image/png. Созданное изображение имеет разрешение 96dpi.

+ +

Третий аргумент используется для изображений с MIME-типом image/jpeg для определения его качества.

+ +

Синтаксис

+ +
void canvas.toBlob(callback, mimeType, qualityArgument);
+
+ +

Параметры

+ +
+
callback
+
Callback-функция с результирующим объектом {{domxref("Blob")}} в качестве единственного аргумента.
+
mimeType {{optional_inline}}
+
Аргумент типа {{domxref("DOMString")}} определяющий формат изображения. По умолчанию image/png.
+
qualityArgument {{optional_inline}}
+
Аргумент типа {{jsxref("Number")}} со значением от 0 до 1, определяющий качество изображения, если заявлен MIME-тип image/jpeg или image/webp. Если этот аргумент содержит нечто иное, для определения качества изображения будет использовано значение по умолчанию. Остальные аргументы проигнорируются.
+
+ +

Возвращаемое значение

+ +

Не возвращает ничего.

+ +

Примеры

+ +

Получение файла, представленного в canvas

+ +

Как только вы нарисовали содержимое в canvas, вы можете сконвертировать его в файл изображения любого поддерживаемого формата. Ниже приведён фрагмент кода, для примера, принимает изображение в элементе {{HTMLElement("canvas")}} с ID = "canvas" и получает его копию в виде PNG изображения, затем добавляет в документ новый элемент {{HTMLElement("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');
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}{{Spec2('HTML5.1')}}No change
{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}{{Spec2('HTML5 W3C')}}Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("50")}}{{CompatGeckoDesktop('19')}}{{CompatIE(10)}}{{property_prefix("ms")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]
Image quality parameter{{CompatChrome("50")}}{{CompatGeckoDesktop('25')}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome("50")}}{{CompatGeckoMobile("19")}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatChrome("50")}}
Image quality parameter{{CompatNo}}{{CompatChrome("50")}}{{CompatGeckoMobile("25")}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatChrome("50")}}
+
+ +

[1] See {{WebKitBug("71270")}}.

+ +

Полифилл

+ +

Полифилл, основанный на 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'} ) );
+
+      });
+    }
+  });
+}
+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf