convert to md for api.HTMLCanvasElement.toBlob

1 files changed, 59 insertions, 87 deletions

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
 ---
-<div>
-<div>
-<div>{{APIRef("Canvas API")}}</div>
-</div>
-</div>
+{{APIRef("Canvas API")}}
 
-<p><strong><code>HTMLCanvasElement.toBlob()</code></strong> 方法创造{{domxref("Blob")}}对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。如不特别指明，图片的类型默认为 image/png，分辨率为96dpi。</p>
+**`HTMLCanvasElement.toBlob()`** 方法创造 {{domxref("Blob")}} 对象，用以展示 canvas 上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。如不特别指明，图片的类型默认为 image/png，分辨率为96dpi。
 
-<p>第三个参数用于针对image/jpeg格式的图片进行输出图片的质量设置。</p>
+第三个参数用于针对 image/jpeg 格式的图片进行输出图片的质量设置。
 
-<h2 id="语法">语法</h2>
+## 语法
 
-<pre class="syntaxbox"><var><em>canvas</em>.toBlob(<em>callback</em>, <em>type</em>, <em>encoderOptions</em>);</var>
-</pre>
+```js
+canvas.toBlob(callback, type, encoderOptions);
+```
 
-<h3 id="参数">参数</h3>
+### 参数
 
-<dl>
- <dt><code>callback</code></dt>
- <dd>回调函数，可获得一个单独的{{domxref("Blob")}}对象参数。</dd>
- <dt><code>type</code> {{optional_inline}}</dt>
- <dd>{{domxref("DOMString")}}类型，指定图片格式，默认格式为<code>image/png</code>。</dd>
- <dt><code>encoderOptions</code> {{optional_inline}}</dt>
- <dd>{{jsxref("Number")}}类型，值在0与1之间，当请求图片格式为<code>image/jpeg</code>或者<code>image/webp</code>时用来指定图片展示质量。如果这个参数的值不在指定类型与范围之内，则使用默认值，其余参数将被忽略。</dd>
-</dl>
+- `callback`
+  - : 回调函数，可获得一个单独的 {{domxref("Blob")}} 对象参数。
+- `type` {{optional_inline}}
+   - : {{domxref("DOMString")}} 类型，指定图片格式，默认格式为 `image/png`。
+- `encoderOptions` {{optional_inline}}
+   - : {{jsxref("Number")}} 类型，值在 0 与 1 之间，当请求图片格式为 `image/jpeg` 或者 `image/webp` 时用来指定图片展示质量。如果这个参数的值不在指定类型与范围之内，则使用默认值，其余参数将被忽略。
 
-<h3 id="返回值">返回值</h3>
+### 返回值
 
-<p>无。</p>
+无。
 
-<h3 id="异常">异常</h3>
+### 异常
 
-<dl>
- <dt><code>SecurityError</code></dt>
- <dd>canvas“<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image">被污染</a>”的情况下不能使用此方法</dd>
-</dl>
+- `SecurityError`
+   - : canvas“[被污染](/zh-CN/docs/Web/HTML/CORS_enabled_image)”的情况下不能使用此方法
 
-<h2 id="示例">示例</h2>
+## 示例
 
-<h3 id="将canvas图像转换为文件">将canvas图像转换为文件</h3>
+### 将canvas图像转换为文件
 
-<p>当一个内容画到canvas上时，我们可以将它生成任何一个格式支持的图片文件。比如，下面的代码段获得了id为“canvas”的{{HTMLElement("canvas")}}元素中的图像，复制成一个PNG图，在文档中加入一个新的{{HTMLElement("img")}}元素，这个{{HTMLElement("img")}}元素的源图就是使用canvas创建的那个图像。 </p>
+当一个内容画到 canvas 上时，我们可以将它生成任何一个格式支持的图片文件。比如，下面的代码段获得了 id 为“canvas”的 {{HTMLElement("canvas")}} 元素中的图像，复制成一个 PNG 图，在文档中加入一个新的 {{HTMLElement("img")}} 元素，这个 {{HTMLElement("img")}} 元素的源图就是使用 canvas 创建的那个图像。
 
-<pre class="brush: js">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);
 });
-</pre>
+```
 
-<p>注意，我们这里创建的是PNG图片；如果在<code>toBlob()传入第二个参数，就可以指定图片格式。例如，生成JPEG格式的图片：</code></p>
+注意，我们这里创建的是PNG图片；如果在 `toBlob()` 传入第二个参数，就可以指定图片格式。例如，生成JPEG格式的图片：
 
-<pre class="brush: js"> canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality</pre>
+```js
+canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality
+```
 
-<div>
-<h3 id="将canvas转换为ico（仅限Mozilla）">将canvas转换为ico（仅限Mozilla）</h3>
+### 将canvas转换为ico（仅限Mozilla）
 
-<p>使用<code>-moz-parse来将canvas转换为ico。</code>Windows XP不支持将PNG转为ico，因此转为bmp作为代替。设置下载属性，生成下载链接。下载属性的值将被用来作为文件名。</p>
+使用 `-moz-parse` 来将 canvas 转换为 ico。Windows XP 不支持将 PNG 转为 ico，因此转为 bmp 作为代替。设置下载属性，生成下载链接。下载属性的值将被用来作为文件名。
 
-<pre class="brush: js">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');</pre>
-</div>
+              '-moz-parse-options:format=bmp;bpp=32');
+```
 
-<h3 id="Save_toBlob_to_disk_with_OS.File_(chromeadd-on_context_only)">Save toBlob to disk with OS.File (chrome/add-on context only)</h3>
+### Save toBlob to disk with OS.File (chrome/add-on context only)
 
-<div class="note">
-<p>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.</p>
-</div>
+> **备注：** 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.
 
-<pre class="brush: js">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');</pre>
+              '-moz-parse-options:format=bmp;bpp=32');
+```
 
-<h2 id="Polyfill">Polyfill</h2>
+## Polyfill
 
-<p>A low performance polyfill based on toDataURL.</p>
+A low performance polyfill based on toDataURL.
 
-<pre class="brush: js">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',
   }
  });
 }
-</pre>
-
-<h2 id="文档">文档</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>No change</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容">浏览器兼容</h2>
-
-<p>{{Compat("api.HTMLCanvasElement.toBlob")}}</p>
-
-<h2 id="扩展阅读">扩展阅读</h2>
-
-<ul>
- <li>The interface defining it, {{domxref("HTMLCanvasElement")}}.</li>
- <li>{{domxref("Blob")}}</li>
-</ul>
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- The interface defining it, {{domxref("HTMLCanvasElement")}}.
+- {{domxref("Blob")}}