关于javascript：无法在\\’CanvasRenderingContext2D \\’上执行\\’putImageData \\’：参数1的类型不是\\’ImageData \\’

Failed to execute 'putImageData' on 'CanvasRenderingContext2D': parameter 1 is not of type 'ImageData'

下面是我的html代码，它得到错误：
"无法在\\'CanvasRenderingContext2D \\'上执行\\'putImageData \\'：参数1的类型不是\\'ImageData \\'。"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
Document
</head>
<body>
<canvas id="c"></canvas>

const data = new Uint8ClampedArray([255, 0, 0, 1]);
const ctx = document.querySelector("#c").getContext("2d");
ctx.putImageData(data, 0, 0);

</body>
</html>

相关讨论

您的代码中有1个主要问题，而您的代码中有1个额外的小问题。

主要问题

.putImageData要求ImageData作为其第一个参数。相反，您给出了Uint8ClampedArray。

要解决此问题，您需要使用Uint8ClampedArray创建一个ImageData实例：

1	data = new ImageData(new Uint8ClampedArray([255, 0, 0, 1]), /* other required params */);

其他问题

在Uint8ClampedArray中，您有一个数组[255, 0, 0, 1]。该数据实际上转换为rgba(255, 0, 0, 0.005)。换句话说，您的小红色框将以0.005的alpha渲染，几乎是透明的。

要使其不透明，您需要将alpha转换为255的比例。

例如，如果要使用1x1不透明的红色框，则需要将[255, 0, 0, 255]赋予Uint8ClampedArray。

示例

请参见下面的2x2半透明(alpha为0.5)红色框的示例。

1
2
3
4
5
6
7
8
9
10
11
12
13

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

const data = new Uint8ClampedArray([
255, 0, 0, 128,
255, 0, 0, 128,
255, 0, 0, 128,
255, 0, 0, 128
]);

const imageData = new ImageData(data, 2, 2);

ctx.putImageData(imageData, 0, 0);

1	<canvas id="canvas"></canvas>

如错误消息所述，putImageData()需要一个ImageData对象，例如：

1
2
3
4
5
6
7
8
9
10
11
12

const canvas = document.querySelector("#c");
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(canvas.width, canvas.height);

for (let i = 0; i < imageData.data.length; i += 4) {
imageData.data[i + 0] =
imageData.data[i + 1] =
imageData.data[i + 2] = (i % canvas.width) % 256;
imageData.data[i + 3] = 255; // A value
}

ctx.putImageData(imageData, 0, 0);

1	<canvas id="c" width="500" height="300"></canvas>