How do I convert blob to imagedata?

Question

I want to stream an image to webpage via websocket. the data is in RGBA. how do I change the blog into image data?

this is my current code, it doesn't work and it will be slow. is there a direct way of assigning event.data to canvas' image 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);

   }

this may help [Using Dart to Download a PNG File (Binary File) and displaying it not working](http://stackoverflow.com/questions/18290998/using-dart-to-download-a-png-file-binary-file-and-displaying-it-not-working) — Günter Zöchbauer, Nov 15 '13 at 07:49

score -1 · Answer 1 · answered Jul 25 '15 at 22:15

On Firefox you can use the toBlob method. Put the image data on a temporany canvas and call toBlob method. Proof of concept example:

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

For more have a look at Moz Dev: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob

How do I convert blob to imagedata?

1 Answers1