我想使用一些随机函数将随机图像生成到 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 中实现它? 任何人都可以帮我解决这个问题吗?
最佳答案
您可以尝试使用 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
关于javascript - 如何从随机 uint8array 渲染图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54722254/