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

打印页面