chore(zh): use images from shared-assets

mdn · Aug 28, 2024 · b3e126b · b3e126b
1 parent e8effd2
commit b3e126b
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 41 deletions.
diff --git a/files/zh-cn/web/api/canvas_api/tutorial/using_images/index.md b/files/zh-cn/web/api/canvas_api/tutorial/using_images/index.md
@@ -158,26 +158,28 @@ function draw() {
 > 图像可能会因为大幅度的缩放而变得起杂点或者模糊。如果你的图像里面有文字，那么最好还是不要进行缩放，因为那样处理之后很可能图像里的文字就会变得无法辨认了。
 
 ```html hidden
-<html>
-  <body onload="draw();">
+<html lang="zh">
+  <body>
     <canvas id="canvas" width="150" height="150"></canvas>
   </body>
 </html>
 ```
 
 ```js
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
-  var img = new Image();
-  img.onload = function () {
-    for (var i = 0; i < 4; i++) {
-      for (var j = 0; j < 3; j++) {
+  const ctx = document.getElementById("canvas").getContext("2d");
+  const img = new Image();
+  img.onload = () => {
+    for (let i = 0; i < 4; i++) {
+      for (let j = 0; j < 3; j++) {
         ctx.drawImage(img, j * 50, i * 38, 50, 38);
       }
     }
   };
-  img.src = "rhino.jpg";
+  img.src = "https://mdn.github.io/shared-assets/images/examples/rhino.jpg";
 }
+
+draw();
 ```
 
 结果看起来像这样：
@@ -202,23 +204,31 @@ function draw() {
 我用一个与上面用到的不同的方法来装载图像，直接将图像插入到 HTML 里面，然后通过 CSS 隐藏（`display:none`）它。两个图像我都赋了 `id` ，方便后面使用。看下面的脚本，相当简单，首先对犀牛头做好切片（第一次`drawImage`）放在 canvas 上，然后再上面套个相框（第二次`drawImage`）。
 
 ```html
-<html>
-  <body onload="draw();">
-    <canvas id="canvas" width="150" height="150"></canvas>
-    <div style="display:none;">
-      <img id="source" src="rhino.jpg" width="300" height="227" />
-      <img id="frame" src="canvas_picture_frame.png" width="132" height="150" />
-    </div>
-  </body>
-</html>
+<canvas id="canvas" width="150" height="150"></canvas>
+<div style="display: none;">
+  <img
+    id="source"
+    src="https://mdn.github.io/shared-assets/images/examples/rhino.jpg"
+    width="300"
+    height="227" />
+  <img id="frame" src="canvas_picture_frame.png" width="132" height="150" />
+</div>
 ```
 
 ```js
-function draw() {
-  var canvas = document.getElementById("canvas");
-  var ctx = canvas.getContext("2d");
+async function draw() {
+  // 等待所有图片的加载。
+  await Promise.all(
+    Array.from(document.images).map(
+      (image) =>
+        new Promise((resolve) => image.addEventListener("load", resolve)),
+    ),
+  );
 
-  // Draw slice
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext("2d");
+
+  // 绘制切片
   ctx.drawImage(
     document.getElementById("source"),
     33,
@@ -231,9 +241,11 @@ function draw() {
     104,
   );
 
-  // Draw frame
+  // 绘制相框
   ctx.drawImage(document.getElementById("frame"), 0, 0);
 }
+
+draw();
 ```
 
 {{EmbedLiveSample("示例：相框", "", "160")}}

diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.md
@@ -2,7 +2,7 @@
 title: CanvasRenderingContext2D：drawImage() 方法
 slug: Web/API/CanvasRenderingContext2D/drawImage
 l10n:
-  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
+  sourceCommit: c0f1aecaed48d75652c6dd97f30c7febd07e5cde
 ---
 
 {{APIRef}}
@@ -63,7 +63,11 @@ drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
 ```html
 <canvas id="canvas"></canvas>
 <div style="display:none;">
-  <img id="source" src="rhino.jpg" width="300" height="227" />
+  <img
+    id="source"
+    src="https://mdn.github.io/shared-assets/images/examples/rhino.jpg"
+    width="300"
+    height="227" />
 </div>
 ```
 
@@ -109,7 +113,7 @@ image.height = 45; // 使用可选的图片尺寸
 image.onload = drawImageActualSize; // 图片加载完成后进行绘制
 
 // 加载一个固定尺寸（以 CSS 像素为单位）为 300x227 的图片
-image.src = "rhino.jpg";
+image.src = "https://mdn.github.io/shared-assets/images/examples/rhino.jpg";
 
 function drawImageActualSize() {
   // 在画布上使用图片的实际尺寸（以 CSS 像素为单位）

diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/filter/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/filter/index.md
@@ -2,7 +2,7 @@
 title: CanvasRenderingContext2D：filter 属性
 slug: Web/API/CanvasRenderingContext2D/filter
 l10n:
-  sourceCommit: f9f48866f02963e752717310b76a70d5bdaf554c
+  sourceCommit: c0f1aecaed48d75652c6dd97f30c7febd07e5cde
 ---
 
 {{APIRef}}
@@ -84,7 +84,9 @@ ctx.fillText("Hello world", 50, 100);
 ```html
 <canvas id="canvas" width="400" height="150"></canvas>
 <div style="display:none;">
-  <img id="source" src="rhino.jpg" />
+  <img
+    id="source"
+    src="https://mdn.github.io/shared-assets/images/examples/rhino.jpg" />
 </div>
 ```
 

diff --git a/files/zh-tw/web/api/canvas_api/tutorial/using_images/index.md b/files/zh-tw/web/api/canvas_api/tutorial/using_images/index.md
@@ -184,11 +184,9 @@ function draw() {
       }
     }
   };
-  img.src = "rhino.jpg";
+  img.src = "https://mdn.github.io/shared-assets/images/examples/rhino.jpg";
 }
-```
 
-```js hidden
 draw();
 ```
 
@@ -212,23 +210,31 @@ drawImage()第三個型態接受 9 個參數，其中 8 個讓我們從原始影
 本例用和前一個範例一樣的犀牛圖，然後切出犀牛頭部影像部分再放入一個影像畫框，這個影像畫框是一個有陰影的 24 位元 PNG 圖檔，因為 24 位元 PNG 影像具備完整的 8 位元不透明色版(alpha channel)，所以不像 GIF 影像和 8 位元 PNG 影像，它能夠放任何背景之上而無須擔心產生消光色(matte color).
 
 ```html
-<html lang="zh">
-  <body>
-    <canvas id="canvas" width="150" height="150"></canvas>
-    <div style="display:none;">
-      <img id="source" src="rhino.jpg" width="300" height="227" />
-      <img id="frame" src="canvas_picture_frame.png" width="132" height="150" />
-    </div>
-  </body>
-</html>
+<canvas id="canvas" width="150" height="150"></canvas>
+<div style="display: none;">
+  <img
+    id="source"
+    src="https://mdn.github.io/shared-assets/images/examples/rhino.jpg"
+    width="300"
+    height="227" />
+  <img id="frame" src="canvas_picture_frame.png" width="132" height="150" />
+</div>
 ```
 
 ```js
-function draw() {
+async function draw() {
+  // 等待所有圖片載入完畢。
+  await Promise.all(
+    Array.from(document.images).map(
+      (image) =>
+        new Promise((resolve) => image.addEventListener("load", resolve)),
+    ),
+  );
+
   const canvas = document.getElementById("canvas");
   const ctx = canvas.getContext("2d");
 
-  // 繪製切割影像
+  // 繪製切片
   ctx.drawImage(
     document.getElementById("source"),
     33,
@@ -244,6 +250,7 @@ function draw() {
   // 畫一個畫框
   ctx.drawImage(document.getElementById("frame"), 0, 0);
 }
+
 draw();
 ```