[英]How to render images from a random uint8array
我想使用一些隨機函數將隨機圖像生成到 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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.