Save bitmap to disk

[SamPotasz]

I have a simple coloring book app, and I want to give the user the option to save what they've drawn to their computer. Within the app, the drawing is done on a bitmapData object.

Is this at all possible?

Thanks,

Sam

[drhayes]

I have no idea if this will work.

BitmapData is backed by a canvas element available at its canvas property. HTML5 canvas has a "toDataUrl" method that you could invoke like so: "bmp.canvas.toDataUrl('image/png');". That would give you a URL corresponding to the image -- now you have to get the browser to show a file download dialog box for it. I don't think you can just set the location to that URL and get it to download, I think that'd just redirect the page... but you should try it.

Check it out: http://weworkweplay.com/play/saving-html5-canvas-as-image/ This guy agrees, and is using this new HTML5 attribute called "download". Maybe that'll help too, depending on what browser you need to support? There's also opening a popup, maybe? Just spitballing now.

[SamPotasz]

Thanks! I will experiment and report back!

[SamPotasz]

It works! Here's my (probably naive) solution:

In index.html, add a blank hyperlink like so:

<a href="" id="link"></a>

 then when I want to save the image, I call this function:

saveImage: function() {
    var url = bmd.canvas.toDataURL('image/png');
    var link = document.getElementById('linkID');
    link.href = url;
    link.download = PAGE_TITLES[pageIndex] + ".png";
    link.click();
},

I'm not sure about its cross-platform performance, and it doesn't show a "Save as..." dialog, but it's good enough for me.