HTML Canvas - ImageData() 方法

ImageData 介面包含 Canvas 元素內部特定區域的畫素資料。要操作畫素資料，我們可以在 CanvasRenderringContext2D 介面上下文物件上使用 ImageData() 建構函式。

Canvas 2D API 的 HTML Canvas ImageData() 方法用於需要使用影像屬性和方法在畫布元素上繪製圖形時。

語法

以下是 HTML Canvas ImageData 方法的語法：

CanvasRenderringContext2D.ImageData(dataset, width, height, features);

引數

以下是此方法的引數列表：

序號	引數和描述
1	資料集資料集是一個數組，表示所需影像的二維畫素，可以使用以下值之一給出。 Uint8ClampedArray Uint16Array Float32Array 如果沒有將任何值作為引數傳遞，則會使用給定的寬度和高度形成一個透明的黑色矩形。
2	寬度一個整數值，用於確定 Canvas 元素內 ImageData() 物件的寬度。
3	高度一個整數值，用於確定 Canvas 元素內 ImageData() 物件的高度。
4.	特性建構函式接受一個顏色調色盤特性，用於在 Canvas 元素內繪製。它接受以下值。 srgb rec2020 display-p3

返回值

CanvasRenderringContext2D 物件用於建立新的 ImageData() 物件。

示例

以下示例演示瞭如何使用索引陣列向 HTML Canvas ImageData() 方法物件新增顏色。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body onload="Imagedata();">
   <canvas id="canvas" width="300" height="200" style="border: 1px solid black;"></canvas>
   <script>
      function Imagedata() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         const array = new Uint8ClampedArray(40000);
         for (let i = 0; i < array.length; i += 4) {
            array[i + 0] = 200;
            array[i + 1] = 190;
            array[i + 2] = 180;
            array[i + 3] = 170;
         }
         let img_data = new ImageData(array, 100);
         context.putImageData(img_data, 80, 50);
      }
   </script>
</body>
</html>

輸出

上面程式碼生成的輸出影像物件為：

示例

以下程式使用 ImageData() 方法在影像上繪製一個矩形實心顏色影像。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="220" height="180" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      const array = new Uint8ClampedArray(50000);
      for (let i = 0; i < array.length; i += 4) {
         array[i + 0] = 222;
         array[i + 1] = 111;
         array[i + 2] = 11;
         array[i + 3] = 500;
      }
      let imgdata = new ImageData(array, 100);
      context.putImageData(imgdata, 50, 20);
   </script>
</body>
</html>

輸出

網頁上影像返回的輸出為：

html_canvas_images.htm

列印頁面