From 5a9a3cb615dc2f4a21410b72a579f75e7dcd3ea9 Mon Sep 17 00:00:00 2001 From: allo Date: Mon, 13 Dec 2021 10:17:45 +0800 Subject: mv to .md for api.HTMLCanvasElement.toBlob --- .../web/api/htmlcanvaselement/toblob/index.html | 200 --------------------- .../web/api/htmlcanvaselement/toblob/index.md | 200 +++++++++++++++++++++ 2 files changed, 200 insertions(+), 200 deletions(-) delete mode 100644 files/zh-cn/web/api/htmlcanvaselement/toblob/index.html create mode 100644 files/zh-cn/web/api/htmlcanvaselement/toblob/index.md (limited to 'files/zh-cn') diff --git a/files/zh-cn/web/api/htmlcanvaselement/toblob/index.html b/files/zh-cn/web/api/htmlcanvaselement/toblob/index.html deleted file mode 100644 index 02d54ef82c..0000000000 --- a/files/zh-cn/web/api/htmlcanvaselement/toblob/index.html +++ /dev/null @@ -1,200 +0,0 @@ ---- -title: HTMLCanvasElement.toBlob() -slug: Web/API/HTMLCanvasElement/toBlob -translation_of: Web/API/HTMLCanvasElement/toBlob ---- -
-
-
{{APIRef("Canvas API")}}
-
-
- -

HTMLCanvasElement.toBlob() 方法创造{{domxref("Blob")}}对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。如不特别指明，图片的类型默认为 image/png，分辨率为96dpi。

- -

第三个参数用于针对image/jpeg格式的图片进行输出图片的质量设置。

- -

语法

- -
canvas.toBlob(callback, type, encoderOptions);
-
- -

参数

- -
-
callback
-
回调函数，可获得一个单独的{{domxref("Blob")}}对象参数。
-
type {{optional_inline}}
-
{{domxref("DOMString")}}类型，指定图片格式，默认格式为image/png。
-
encoderOptions {{optional_inline}}
-
{{jsxref("Number")}}类型，值在0与1之间，当请求图片格式为image/jpeg或者image/webp时用来指定图片展示质量。如果这个参数的值不在指定类型与范围之内，则使用默认值，其余参数将被忽略。
-
- -

返回值

- -

无。

- -

异常

- -
-
SecurityError
-
canvas“被污染”的情况下不能使用此方法
-
- -

示例

- -

将canvas图像转换为文件

- -

当一个内容画到canvas上时，我们可以将它生成任何一个格式支持的图片文件。比如，下面的代码段获得了id为“canvas”的{{HTMLElement("canvas")}}元素中的图像，复制成一个PNG图，在文档中加入一个新的{{HTMLElement("img")}}元素，这个{{HTMLElement("img")}}元素的源图就是使用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);
-});
-
- -

注意，我们这里创建的是PNG图片；如果在toBlob()传入第二个参数，就可以指定图片格式。例如，生成JPEG格式的图片：

- -
 canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality
- -
-

将canvas转换为ico（仅限Mozilla）

- -

使用-moz-parse来将canvas转换为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');
-
- -

Save toBlob to disk with OS.File (chrome/add-on context only)

- -
-

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');
- -

Polyfill

- -

A low performance polyfill based on toDataURL.

- -
if (!HTMLCanvasElement.prototype.toBlob) {
- Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
-  value: function (callback, type, quality) {
-
-    var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
-        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'} ) );
-  }
- });
-}
-
- -

文档

- - - - - - - - - - - - - - - - - - - - - - - - -
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.
- -

浏览器兼容

- -

{{Compat("api.HTMLCanvasElement.toBlob")}}

- -

扩展阅读

- - diff --git a/files/zh-cn/web/api/htmlcanvaselement/toblob/index.md b/files/zh-cn/web/api/htmlcanvaselement/toblob/index.md new file mode 100644 index 0000000000..02d54ef82c --- /dev/null +++ b/files/zh-cn/web/api/htmlcanvaselement/toblob/index.md @@ -0,0 +1,200 @@ +--- +title: HTMLCanvasElement.toBlob() +slug: Web/API/HTMLCanvasElement/toBlob +translation_of: Web/API/HTMLCanvasElement/toBlob +--- +
+
+
{{APIRef("Canvas API")}}
+
+
+ +

HTMLCanvasElement.toBlob() 方法创造{{domxref("Blob")}}对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。如不特别指明，图片的类型默认为 image/png，分辨率为96dpi。

+ +

第三个参数用于针对image/jpeg格式的图片进行输出图片的质量设置。

+ +

语法

+ +
canvas.toBlob(callback, type, encoderOptions);
+
+ +

参数

+ +
+
callback
+
回调函数，可获得一个单独的{{domxref("Blob")}}对象参数。
+
type {{optional_inline}}
+
{{domxref("DOMString")}}类型，指定图片格式，默认格式为image/png。
+
encoderOptions {{optional_inline}}
+
{{jsxref("Number")}}类型，值在0与1之间，当请求图片格式为image/jpeg或者image/webp时用来指定图片展示质量。如果这个参数的值不在指定类型与范围之内，则使用默认值，其余参数将被忽略。
+
+ +

返回值

+ +

无。

+ +

异常

+ +
+
SecurityError
+
canvas“被污染”的情况下不能使用此方法
+
+ +

示例

+ +

将canvas图像转换为文件

+ +

当一个内容画到canvas上时，我们可以将它生成任何一个格式支持的图片文件。比如，下面的代码段获得了id为“canvas”的{{HTMLElement("canvas")}}元素中的图像，复制成一个PNG图，在文档中加入一个新的{{HTMLElement("img")}}元素，这个{{HTMLElement("img")}}元素的源图就是使用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);
+});
+
+ +

注意，我们这里创建的是PNG图片；如果在toBlob()传入第二个参数，就可以指定图片格式。例如，生成JPEG格式的图片：

+ +
 canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality
+ +
+

将canvas转换为ico（仅限Mozilla）

+ +

使用-moz-parse来将canvas转换为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');
+
+ +

Save toBlob to disk with OS.File (chrome/add-on context only)

+ +
+

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');
+ +

Polyfill

+ +

A low performance polyfill based on toDataURL.

+ +
if (!HTMLCanvasElement.prototype.toBlob) {
+ Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
+  value: function (callback, type, quality) {
+
+    var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
+        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'} ) );
+  }
+ });
+}
+
+ +

文档

+ + + + + + + + + + + + + + + + + + + + + + + + +
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.
+ +

浏览器兼容

+ +

{{Compat("api.HTMLCanvasElement.toBlob")}}

+ +

扩展阅读

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