Js-ipfs: best practice for ipfs node browser image display

[sophiii]

I have an ipfs/ethereum dapp which gets an ipfs image ipfs.files.cat(hash, function (err, stream) then i store that image img = file.toString("base64"); as a base 64 string. Finally i display that image by setting document.getElementById("design_display").src= "data:image/jpeg;base64, " + img;

The problem is that this causes me to be limited to 250KB images because the browser does not let me make string bigger than that. Also its bad practice, uses a lot of memory.

So my question is what is the best way to display an image using browser internal ipfs node in a webpage?

dapp on testnet (use metamask) : http://photographer-paygrade-21755.netlify.com/
src: https://github.com/sophiii/coopShop/blob/master/app/javascripts/app.js

[daviddias]

The normal usage is to create an image from a blob. Found an example for you, see http://jsfiddle.net/Jan_Miksovsky/yy7Zs/ and let me know if it worked :)

[nginnever]

Here is an example using David's linked method in a react application I made awhile back.

Here you can see I'm getting a uint8array buffer from a data api method, followed by web api blobbing the data.

I then set the react state with the url and pass the prop to an <img src> here

[kenshyx]

Don't forget to revoke the image when is not needed in order to get marked for gc. https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL

[daviddias]

@sophiii let us know if these hints helped :)

[sophiii]

Thanks you everyone. This is perfect. I have updated so i use blobs. :)

One follow up question is Can i use this to stream video/audio from IPFS? I have done a little reading and its possible to redirect a stream to a blob. But is this the recommended way to do this?

[daviddias]

Yeah, you can use this module -- https://www.npmjs.com/package/mediasource -- for that :)

Closing this issue then, thanks!

[WilliamKatz]

The normal usage is to create an image from a blob. Found an example for you, see http://jsfiddle.net/Jan_Miksovsky/yy7Zs/ and let me know if it worked :)

Thanks, this helped me