Как визуализировать изображения со случайного uint8array

Question

Я хочу генерировать случайные изображения, используя некоторую случайную функцию, в массив Uint8Array вactjs.Теперь я хочу сделать это через тег.Например:

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

Теперь я хочу отобразить этот «imgUrl» в теге img.

Я преобразовал эти данные в BLOB-объект и создал URL-адрес для установки источника изображения.Однако пока не повезло.Это всегда показывает 0x0 пустое изображение.Даже если у меня массив с нулями, разве он не должен показывать полное черное изображение?

Просто, чтобы дать немного больше контекста, по сути, я пытаюсь скопировать поведение numpy и opencv из python.Там мы можем создать массив NumPy и затем показать это изображение с помощью функции opencv следующим образом:

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

Как я могу добиться этого вactjs?Может кто-нибудь помочь мне здесь?

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