blob을 imagedata로 변환하려면 어떻게해야합니까?

Question

websocket을 통해 이미지를 웹 페이지로 스트리밍하고 싶습니다. 데이터는 RGBA입니다. 블로그를 이미지 데이터로 변경하려면 어떻게해야합니까?

이것은 현재 코드이며, 작동하지 않으며 느려질 것입니다. canvas의 이미지 데이터에 event.data를 지정하는 직접적인 방법이 있습니까?

void onMessage(MessageEvent event) 
    { 
    print("received!"); 
    var imgData = canvas.getImageData(0, 0, 100, 100); 
    var j = 0; 
    for (var i=0;i<imgData.data.length;i+=4) 
    { 
     imgData.data[i+0]=event.data[j]; 
     imgData.data[i+1]=event.data[j+1]; 
     imgData.data[i+2]=event.data[j+2]; 
     imgData.data[i+3]=255; 
     j+=3; 
    } 
    canvas.putImageData(imgData,0,0); 

    } 

Answer 1

Firefox에서는 toBlob 메서드를 사용할 수 있습니다. 임시 데이터 캔버스에 이미지 데이터를 넣고 toBlob 메서드를 호출합니다. 개념 예를 증명 : https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob