如何使用canvas和useRefs在react中显示二进制图像

Question

我有一个形式为[255，0，0255]的模拟RGBA图像，我想使用react在我的网页上显示它。

mockImageArray = [255, 0, 0, 255];
var mockImage = new ImageData(new Uint8ClampedArray(mockImageArray), 1, 1);
const Canvas = (props) => {
const canvasRef = useRef(null);
const draw = (ctx) => {
var imageData = ctx.createImageData(mockImage);
ctx.putImageData(imageData, 0, 0);
};
useEffect(() => {
const canvas = canvasRef.current;
canvas.width = 512;
canvas.height = 256;
const context = canvas.getContext("2d");
draw(context);
}, [draw]);
return <canvas ref={canvasRef} {...props} />;
};

当我在主组件中加载这个组件时，我预计会有一个红色像素，但是，我似乎无法加载任何内容。元素甚至没有显示在元素选项卡中。有人能告诉我哪里出了问题吗？谢谢

Answer 1

根据MDN，createImageData不会从缓冲区复制图像数据。

imagedata要从中复制宽度和高度的现有ImageData对象。图像本身不会被复制。

无论如何都不需要创建单独的imageData；

ctx.putImageData(mockImage, 20, 20);

工作得很好(移动到20,20，因为它更容易看到(。