From 31c733388f530d5abdc8dd99c83cd6b504126c2b Mon Sep 17 00:00:00 2001 From: allo Date: Mon, 13 Dec 2021 10:54:19 +0800 Subject: convert to md for api.HTMLCanvasElement.toBlob --- .../web/api/htmlcanvaselement/toblob/index.md | 146 +++++++++------------ 1 file changed, 59 insertions(+), 87 deletions(-) (limited to 'files/zh-cn/web/api/htmlcanvaselement') diff --git a/files/zh-cn/web/api/htmlcanvaselement/toblob/index.md b/files/zh-cn/web/api/htmlcanvaselement/toblob/index.md index 02d54ef82c..0af21c2811 100644 --- a/files/zh-cn/web/api/htmlcanvaselement/toblob/index.md +++ b/files/zh-cn/web/api/htmlcanvaselement/toblob/index.md @@ -3,50 +3,44 @@ title: HTMLCanvasElement.toBlob() slug: Web/API/HTMLCanvasElement/toBlob translation_of: Web/API/HTMLCanvasElement/toBlob --- -
-
-
{{APIRef("Canvas API")}}
-
-
+{{APIRef("Canvas API")}} -

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

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

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

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

语法

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

返回值

+### 返回值 -

无。

+无。 -

异常

+### 异常 -
-
SecurityError
-
canvas“被污染”的情况下不能使用此方法
-
+- `SecurityError` + - : canvas“[被污染](/zh-CN/docs/Web/HTML/CORS_enabled_image)”的情况下不能使用此方法 -

示例

+## 示例 -

将canvas图像转换为文件

+### 将canvas图像转换为文件 -

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

+当一个内容画到 canvas 上时，我们可以将它生成任何一个格式支持的图片文件。比如，下面的代码段获得了 id 为“canvas”的 {{HTMLElement("canvas")}} 元素中的图像，复制成一个 PNG 图，在文档中加入一个新的 {{HTMLElement("img")}} 元素，这个 {{HTMLElement("img")}} 元素的源图就是使用 canvas 创建的那个图像。 -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 
 canvas.toBlob(function(blob) {
   var newImg = document.createElement("img"),
@@ -60,18 +54,20 @@ canvas.toBlob(function(blob) {
   newImg.src = url;
   document.body.appendChild(newImg);
 });
-
+``` -

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

+注意，我们这里创建的是PNG图片；如果在 `toBlob()` 传入第二个参数，就可以指定图片格式。例如，生成JPEG格式的图片： -
 canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality
+```js +canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality +``` -
-

将canvas转换为ico（仅限Mozilla）

+### 将canvas转换为ico（仅限Mozilla） -

使用-moz-parse来将canvas转换为ico。Windows XP不支持将PNG转为ico，因此转为bmp作为代替。设置下载属性，生成下载链接。下载属性的值将被用来作为文件名。

+使用 `-moz-parse` 来将 canvas 转换为 ico。Windows XP 不支持将 PNG 转为 ico，因此转为 bmp 作为代替。设置下载属性，生成下载链接。下载属性的值将被用来作为文件名。 -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var d = canvas.width;
 ctx = canvas.getContext("2d");
 ctx.beginPath();
@@ -93,16 +89,15 @@ function blobCallback(iconName) {
   }
 }
 canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
-              '-moz-parse-options:format=bmp;bpp=32');
-
+ '-moz-parse-options:format=bmp;bpp=32'); +``` -

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

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

-
+> **备注：** 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");
+```js
+var canvas = document.getElementById("canvas");
 var d = canvas.width;
 ctx = canvas.getContext("2d");
 ctx.beginPath();
@@ -137,13 +132,15 @@ function blobCallback(iconName) {
 }
 
 canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
-              '-moz-parse-options:format=bmp;bpp=32');
+ '-moz-parse-options:format=bmp;bpp=32'); +``` -

Polyfill

+## Polyfill -

A low performance polyfill based on toDataURL.

+A low performance polyfill based on toDataURL. -
if (!HTMLCanvasElement.prototype.toBlob) {
+```js
+if (!HTMLCanvasElement.prototype.toBlob) {
  Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
   value: function (callback, type, quality) {
 
@@ -159,42 +156,17 @@ canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
   }
  });
 }
-
- -

文档

- - - - - - - - - - - - - - - - - - - - - - - - -
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")}}

- -

扩展阅读

- - +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- The interface defining it, {{domxref("HTMLCanvasElement")}}. +- {{domxref("Blob")}} -- cgit v1.2.3-54-g00ecf