The key is to use canvas.toDataURL('image/png') to serialize the image as a data URI, which you can (of course) open in a new window with window.open( uri ). Once the image is open in a new window (note: you may have to instruct your browser to allow popups), you can right-click on the image to get the browser's Save Image As... command in a context menu. From there, you just save the image as you normally would.
The following code can be added to yesterday's example in order to create a button on the page called Open as PNG...
function createPNGButton( ) {As you can see, there's no rocket science involved. Just a little HTML5 magic.
var button = document.createElement("input");
button.setAttribute("type","button");
button.setAttribute("value","Open as PNG...");
button.setAttribute("onclick",
"window.open(canvas.toDataURL('image/png'))" );
document.body.appendChild( button );
}
No comments:
Post a Comment