Question

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

<!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" />
<title>Document</title>
</head>
<body>
<canvas id="c"></canvas>
<script>
  const data = new Uint8ClampedArray([255, 0, 0, 1]);
  const ctx = document.querySelector("#c").getContext("2d");
  ctx.putImageData(data, 0, 0);
</script>
</body>
</html>

Answer 1

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

主要问题

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

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

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）红色框的示例。

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);

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

Answer 2

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

 /**
 * @method User|null find($id, $lockMode = null, $lockVersion = null)
 * @method User|null findOneBy(array $criteria, array $orderBy = null)
 * @method User[]    findAll()
 * @method User[]    findBy(array $criteria, array $orderBy = null, $limit = null, $offset = null)
 */

class UserSearchRepository extends ServiceEntityRepository
{
    public function __construct(ManagerRegistry $registry)
    {
        parent::__construct($registry, User::class);
    }

    public function findByEmail(string $email)
    {
        return $this->findBy(['email' => $email]);
    }
}

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);

无法在'CanvasRenderingContext2D'上执行'putImageData'：参数1不是'ImageData'类型

2 个答案: