Currently I am using Canvas2Image to save the content of my HTML5 canvas. It doesn't appear to work in Google Chrome, however. Any ideas on how to work around the issue are welcome. :)
Add a comment
|
3 Answers
canvas.toDataURL() appears to work fine in Chrome, so it may be a library issue. The "convert canvas to image" functionality seems to work, though.
2 Comments
Juho Vepsäläinen
Okay. The library uses toDataUrl and "document.location.href" for providing save dialog. Apparently "document.location.href" isn't supported by Chrome.
Sam Dutton
Any progress with this: is it possible to get a Save As... dialog in Chrome as for Firefox?
use this code
<html>
<head>
<script src="base64.js" type="text/javascript"></script>
<script src="canvas2image.js" type="text/javascript"></script>
</head>
<body>
<input type="button" id="savecanvas" value="Save Image" onclick="savecanvasfile()"/>
</body>
</html>
<script>
function savecanvasfile(){
var canvas = document.getElementById('canvas_name');
Canvas2Image.saveAsPNG(canvas);
}
</script>
download these canvas2image.js and base64.js and save it in local folder for the working of this code.
These will be available in the site https://web.archive.org/web/20140904002425/http://www.nihilogic.dk/labs/canvas2image/
6 Comments
malber
Interesting approach but you cannot choose the file name, or am I missing something?
Abi
yeah!! But I cannot choose a name while I'm running it in Chrome. But Firefox browser prompts for the file name to save it. How this can be resolved??
malber
In my case Firefox asks for saving the file, not for changing its name. A workaround for Chrome and IE (HTML5) without touching anything server-side is this: stackoverflow.com/questions/3906142/… . No solution yet for Firefox.
Kissaki
Why are you assigning
context and strDataURI when they are never used?Kissaki
The linked website is dead.
|
var canvas = document.getElementById("canvas");
var strDataURI = canvas.toDataURL("image/png;base64");
document.write('<img src="'+strDataURI+'"/>');
1 Comment
Kissaki
Why did you include
var context = canvas.getContext("2d");, when context is not being used?