Page 1 of 1

Downloading/Sharing an HTML5 Canvas Image

Posted: Tue Jan 06, 2015 1:03 pm
by Jared Ziegler

How can I allow a native mobile user to download an image generated from HTML5 canvas (such as via toDataUrl) so that they can open it with another app? (such as their e-mail app, for sharing purposes.)

I've been testing this on Android. I've been able to display the image, but not download it. Any thoughts on how I might do this?

"Sharing" the image to another app directly would also be acceptable. (Probably even preferable, if it works on all platforms.)


Downloading/Sharing an HTML5 Canvas Image

Posted: Wed Jan 07, 2015 3:39 am
by Yurii Orishchuk

Hi Jared,

You can convert your canvas source to base64. Then you can use this source like you need.

For example: you can:

  1. Get base64 source from canvas.

  2. Convert this source to blob.

  3. Upload this blob file to Appery.io DB Files collection. And get direct link to this file.

  4. Use this link - in way you need.

    Here you can find details for this solution: https://getsatisfaction.com/apperyio/...

    Regards.


Downloading/Sharing an HTML5 Canvas Image

Posted: Wed Jan 07, 2015 1:07 pm
by Jared Ziegler

Sorry I forgot to mention: I was hoping to do this without a need for network access. The image contains some private user data, so I'd rather not upload it anywhere. Is there any way to just download or share (with other apps) the file directly? Since the entire image is being generated by Javascript, it seems like I should have everything I need without going to the web.

Thanks!


Downloading/Sharing an HTML5 Canvas Image

Posted: Wed Jan 07, 2015 11:25 pm
by Yurii Orishchuk

Hi Jared,

Unfortunatly we have not such example.

But common plan is:

  1. Get base64 source from canvas.

  2. Convert this source to blob.

  3. Store this file on device with file plugin https://github.com/apache/cordova-plu...

  4. Share this local stored file with other app(currently we don't know how to do it).

    Regards.