SamPotasz

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.

Share this post


Link to post
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";
    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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.