Question

我想使用一些随机函数生成随机图像到reactjs的Uint8Array中。现在我想通过标签渲染它。例如：

img = new Uint8Array(100 * 100 * 3); // want to create a 100 * 100 3 channel color image
//someRandomFunction(img);
let blob = new Blob( [ img ], { type: "image/png" } );
var urlCreator = window.URL || window.webkitURL;
const imageUrl = urlCreator.createObjectURL( blob );

现在，我想在img标签中呈现此“ imgUrl”。

我已将此数据转换为Blob，并创建了一个URL以设置图像源。但是，到目前为止没有运气。它始终显示一些0x0的空白图像。即使我有一个全零数组，它也不应该显示一个完整的黑色图像吗？

仅给出更多的上下文，从本质上讲，我试图从python复制numpy和opencv的行为。在那里，我们可以创建一个numpy数组，然后通过像这样的opencv函数显示该图像：

img = np.random.randint([100, 100, 3], dtype=np.uint8)
cv2.imshow('image', img);

如何在reactjs中实现呢？有人可以在这里帮我吗？

Answer 1

您可以尝试使用Uint8ClampedArray，ImageData和canvas代替img。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const arr = new Uint8ClampedArray(40000);

// Iterate through every pixel
for (let i = 0; i < arr.length; i += 4) {
  arr[i + 0] = 0;    // R value
  arr[i + 1] = 190;  // G value
  arr[i + 2] = 0;    // B value
  arr[i + 3] = 255;  // A value
}

// Initialize a new ImageData object
let imageData = new ImageData(arr, 200);

// Draw image data to the canvas
ctx.putImageData(imageData, 20, 20);

有关更多信息，请参见MDN ImageData和Uint8ClampedArray

如何从随机uint8array渲染图像

1 个答案: