[zh-cn]: update the translation of CanvasRenderingContext2D.putImageData() method

files/zh-cn/web/api/canvasrenderingcontext2d/putimagedata/index.md

@@ -1,48 +1,58 @@
 ---
-title: CanvasRenderingContext2D.putImageData()
+title: CanvasRenderingContext2D：putImageData() 方法
 slug: Web/API/CanvasRenderingContext2D/putImageData
+l10n:
+  sourceCommit: 005cc1fd55aadcdcbd9aabbed7d648a275f8f23a
 ---
 
 {{APIRef}}
 
-**`CanvasRenderingContext2D.putImageData()`** 是 Canvas 2D API 将数据从已有的 {{domxref("ImageData")}} 对象绘制到位图的方法。如果提供了一个绘制过的矩形，则只绘制该矩形的像素。此方法不受画布转换矩阵的影响。
+Canvas 2D API 的 **`CanvasRenderingContext2D.putImageData()`** 方法用于将数据从已有的 {{domxref("ImageData")}} 对象绘制到位图。如果提供了一个绘制过的矩形，则只绘制该矩形的像素。此方法不受画布转换矩阵的影响。
+
+> **备注：** 可以使用 {{domxref("CanvasRenderingContext2D.getImageData()", "getImageData()")}} 方法从画布中获取图像数据。
+
+关于 `putImageData()` 方法和一般的画布内容操作，你可以在文章[像素操作](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas) 中找到更多信息。
 
 ## 语法
 
-```
-void ctx.putImageData(imagedata, dx, dy);
-void ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
+```js-nolint
+putImageData(imageData, dx, dy)
+putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)
 ```
 
 ### 参数
 
 - `imageData`
-  - : {{domxref("ImageData")}}，包含像素值的数组对象。
+  - : 一个 {{domxref("ImageData")}} 对象，包含像素值数组。
 - `dx`
-  - : 源图像数据在目标画布中的位置偏移量（x 轴方向的偏移量）。
+  - : 目标画布中放置图像数据的水平位置（x 坐标）。
 - `dy`
-  - : 源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量）。
+  - : 目标画布中放置图像数据的垂直位置（y 坐标）。
 - `dirtyX` {{optional_inline}}
-  - : 在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（x 坐标）。
+  - : 提取图像数据的左上角的水平位置（x 坐标）。默认为 `0`。
 - `dirtyY` {{optional_inline}}
-  - : 在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（y 坐标）。
+  - : 提取图像数据的左上角的垂直位置（y 坐标）。默认为 `0`。
 - `dirtyWidth` {{optional_inline}}
-  - : 在源图像数据中，矩形区域的宽度。默认是图像数据的宽度。
+  - : 要绘制的矩形的宽度。默认为图像数据的宽度。
 - `dirtyHeight` {{optional_inline}}
-  - : 在源图像数据中，矩形区域的高度。默认是图像数据的高度。
+  - : 要绘制的矩形的高度。默认为图像数据的高度。
+
+### 返回值
 
-### 抛出错误
+无（{{jsxref("undefined")}}）。
 
-- `NotSupportedError`
+### 异常
+
+- `NotSupportedError` {{domxref("DOMException")}}
   - : 如果任何一个变量被设置成无穷大，则会抛出此错误。
-- `InvalidStateError`
+- `InvalidStateError` {{domxref("DOMException")}}
   - : 如果过图像数据对象的数据被分离，会抛出此错误。
 
 ## 示例
 
-### 理解 `putImageData`
+### 理解 putImageData
 
-通过{{domxref("CanvasRenderingContext2D.fillRect()")}}方法实现，更好地理解 putImageData 的执行算法。获取更多信息，参见 [使用 Canvas 控制像素](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas) 和 {{domxref("ImageData")}} 对象。
+为了理解这个算法在底层是如何工作的，这里是一个基于 {{domxref("CanvasRenderingContext2D.fillRect()")}} 的实现示例。
 
 #### HTML
 
@@ -86,18 +96,49 @@ function putImageData(
   }
 }
 
-// Draw content onto the canvas
+// 在画布上绘制内容
 ctx.fillRect(0, 0, 100, 100);
-// Create an ImageData object from it
+// 从画布创建一个 ImageData 对象
 const imagedata = ctx.getImageData(0, 0, 100, 100);
-// use the putImageData function that illustrates how putImageData works
+// 使用 putImageData 函数来展示 putImageData 的工作原理
 putImageData(ctx, imagedata, 150, 0, 50, 50, 25, 25);
 ```
 
 #### 结果
 
 {{ EmbedLiveSample('理解 putImageData', 700, 180) }}
 
+### 由于浏览器优化数据丢失
+
+> **警告：** 由于转换为和从预乘的 alpha 色值之间的损失性质，刚刚使用 `putImageData()` 设置的像素可能会被返回为等效的 `getImageData()`，但值不同。
+
+#### JavaScript
+
+```js
+const canvas = document.createElement("canvas");
+canvas.width = 1;
+canvas.height = 1;
+const context = canvas.getContext("2d");
+const imgData = context.getImageData(0, 0, canvas.width, canvas.height);
+const pixels = imgData.data;
+pixels[0 + 0] = 1;
+pixels[0 + 1] = 127;
+pixels[0 + 2] = 255;
+pixels[0 + 3] = 1;
+console.log("before:", pixels);
+context.putImageData(imgData, 0, 0);
+const imgData2 = context.getImageData(0, 0, canvas.width, canvas.height);
+const pixels2 = imgData2.data;
+console.log("after:", pixels2);
+```
+
+输出可能如下所示：
+
+```plain
+before: Uint8ClampedArray(4) [ 1, 127, 255, 1 ]
+after: Uint8ClampedArray(4) [ 255, 255, 255, 1 ]
+```
+
 ## 规范
 
 {{Specifications}}
@@ -108,6 +149,6 @@ putImageData(ctx, imagedata, 150, 0, 50, 50, 25, 25);
 
 ## 参见
 
-- 接口定义， {{domxref("CanvasRenderingContext2D")}}.
-- {{domxref("ImageData")}}
-- [Pixel manipulation with canvas](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas)
+- 定义此方法的接口：{{domxref("CanvasRenderingContext2D")}}
+- {{domxref("ImageData")}} 对象
+- [像素操作](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas)