Uint8 Array для изображения в JavaScript

Question

У меня есть Uint8Array с именем frameBytes.Я создал значения RGBA из этого байтового массива с помощью этого кода.

    for(var i = 0; i < frameBytes.length; i++) {
        imgData.data[4*i] = frameBytes[i];// red
        imgData.data[4*i + 1] = frameBytes[i]; // green
        imgData.data[4*i + 2] = frameBytes[i];// blue
        imgData.data[4*i + 3] = 255; //alpha 
    }

Затем я показал эти значения GRBA на холст, используя следующий код.

var ctx = fingerFrame.getContext('2d');
var imgData= ctx.createImageData(fingerFrame.width,fingerFrame.height);
 ctx.putImageData(imgData, 0, 0, 0, 0,fingerFrame.width,fingerFrame.height);

После этого из canvas я использовал изображение в теге imgae, используя следующий код:

 const img = document.getElementById('i');  
 img.src = fingerFrame.toDataURL(); 

Но я не хочу использовать canvas.Я хочу показать изображение в теге изображения непосредственно из Uint8Array.Как я могу это сделать ?Любая помощь будет высоко оценена.

Answer 1

Полагаю, вы можете использовать функцию btoa, которая создаст представление base64 ASCII данных изображения ..

 const img = document.getElementById('i');  

 //ImageDataArrayBuffer is your uint8 Array Buffer
 img.src =  "data:image/png;base64,"+ btoa(String.fromCharCode.apply(null, ImageDataArrayBuffer));

Answer 2

Вы можете создать Blob , если знаете тип mime.

const blob = new Blob(imgData.data, 'image/png');
const url = window.URL.createObjectURL(blob);

const img = document.getElementById('i');  
img.src = url;