how to change a blob to image data?

[Bill Yan]

I want to send image data via web socket and display it in a canvas, but it's very difficult to do. I tried so many ways to convert blob to image data, I just couldn't.

can someone show me a code snippet that does so?

this is what I have:

  void onMessage(MessageEvent event)

  {

    print("received!");

   

   

   var f = new FileReader();

   print("received!2");

 //  f.readAsArrayBuffer(event.data);

    var ubuf = new Uint8List(event.data);

var imgData = canvas.createImageData(100,100);

print("received!6");

    var j = 0;

    for (var i=0;i<imgData.data.length;i+=4)

    {

      imgData.data[i+0]=ubuf[j];

      imgData.data[i+1]=ubuf[j+1];

      imgData.data[i+2]=ubuf[j+2];

      imgData.data[i+3]=255;

      j+=3;

    }

    print("received!7");

    canvas.putImageData(imgData,0,0);

   

  }

[Bill Yan]

sorry for spamming here, I posted to stack overflow, nobody replied to my question

[Ingram Chen]

Below is how I do conversion:

Future<String> loadBlobAsDataUri(Blob blob) {

  var fileReader = new FileReader();

  var future = fileReader.onLoad.first.then((ProgressEvent event) {

    return fileReader.result;

  });

  fileReader.readAsDataUrl(blob);

  return future;

}

Future<ImageElement> loadBlobAsImg(Blob blob) {

  ImageElement image = new ImageElement();

  return loadBlobAsDataUri(blob).then((String dataUri) {

    var loaded = image.onLoad.first;

    image.src = dataUri;

    return loaded.then((_) => image);

  });

}

loadBlobAsImg(blob).then((img) => canvas.drawImage(img));

for your reference.

[Bill Yan]

Thank you, but this is not what I need.

In my case, the image is generated on the fly. the blob has the image data, not it's url.

I don't know how to convert blob to image data

[William Hesse]

A data URI is actually a long string, that is a URI, but actually contains the data in the part of the URI after the data: scheme. For example:

(from Wikipedia)

<img src="data:image/png;base64,iVBORw0KGg

oAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI

12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

Whitespace, including carriage returns, is allowed in

the URI if it is base64 encoded.

So loading a blob (or a file) as a data URI returns a long string

 starting with "data:" and actually containing the data from the blob.

--
For other discussions, see https://groups.google.com/a/dartlang.org/
 
For HOWTO questions, visit http://stackoverflow.com/tags/dart
 
To file a bug report or feature request, go to http://www.dartbug.com/new

To unsubscribe from this group and stop receiving emails from it, send an email to misc+uns...@dartlang.org.

--
William Hesse

[Bill Yan]

Thank you for the explanation. Is there a limitation for the size of the image when encoding it with url?

I'm from the C++ world. I'm not that familiar with javascript. I want to port my graphics program to the web.

I really really miss C++ pointers and types. 

var a = func();

there is no way to tell what type a function returns in javacript.

and then if you call funcb(a), they will throw an error at you saying your data type is wrong. this is very frustrating.