HTML Canvas - getImageData() 方法

HTML Canvas 的getImageData() 方法是 Canvas 2D API 的一部分，它獲取指定 Canvas 元素區域的資料並返回一個 ImageData 物件。

此方法不受任何變換方法的影響，並且只有當畫素位於 Canvas 內部時才會返回ImageData 物件。

語法

以下是 HTML Canvas getImageData() 方法的語法：

CanvasRenderingContext2D.getImageData(x, y, width, height);

引數

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

序號	引數和方法
1	x 要提取ImageData 的矩形的左上角的 x 座標。
2	y 要提取ImageData 的矩形的左上角的 y 座標。
3	width 要提取ImageData 的矩形的寬度。
4	height 要提取ImageData 的矩形的寬度。

返回值

使用 Canvas 中存在的ImageData 物件和給定大小返回一個新的ImageData 物件。

示例

此示例建立一個矩形，並使用 HTML Canvas getImageData 方法將 Canvas 元素上指定部分的ImageData 獲取到。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body onload="Context();">
   <canvas id="canvas" width="350" height="200" style="border: 1px solid black;"></canvas>
   <script>
      function Context() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         context.fillStyle = 'purple';
         context.fillRect(10, 10, 200, 150);
         var data = context.getImageData(50, 50, 50, 50);
         context.putImageData(data, 250, 10);
      }
   </script>
</body>
</html>

輸出

以下程式碼在網頁上返回的輸出為：

示例

此示例繪製文字，並使用getImageData() 方法將 Canvas 元素上指定部分的ImageData 獲取到。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body onload="Context();">
   <canvas id="canvas" width="600" height="200" style="border: 1px solid black;"></canvas>
   <script>
      function Context() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         context.font = '55px Verdana';
         context.fillText('This text is filled', 10, 50);
         var data = context.getImageData(10, 10, 100, 50);
         context.putImageData(data, 10, 80);
         var data1 = context.getImageData(200, 10, 100, 50);
         context.putImageData(data1, 150, 80);
         var data2 = context.getImageData(300, 10, 100, 50);
         context.putImageData(data2, 300, 80);
      }
   </script>
</body>
</html>

輸出

以下程式碼在網頁上返回的輸出為：

html_canvas_images.htm

列印頁面