Jump to content

Save bitmap to disk


Recommended Posts

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.

Link to comment
Share on other sites

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

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.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...