websocket - 如何将 blob 转换为图像数据？

Question

我想通过 websocket 将图像流式传输到网页。数据在 RGBA 中。如何将博客转换为图像数据？

这是我当前的代码，它不起作用而且会很慢。有没有一种直接的方法可以将 event.data 分配给 Canvas 的图像数据？

  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 方法。将图像数据放在临时 Canvas 上并调用 toBlob 方法。概念证明示例:

var canvas      = document.createElement('canvas');
canvas.width    = imageData.width;
canvas.height   = imageData.width;
me._dstCanvas.getContext('2d').putImageData(a.dstImgData, 0, 0);
me._dstCanvas.toBlob(function(blob) {
      blob// this is yout file
}, 'image/png', 1);

有关更多信息，请查看 Moz Dev: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob