I am working on a QR Code project and some image is generated via Canvas. So they are not actually images. And users can't download/save it by hitting a "save as" context menu item.
How do I let the users able to download it?
2
-
What have you tried so far? How are you generating the image on the canvas?Sumner Evans– Sumner Evans2014-01-08 04:20:51 +00:00Commented Jan 8, 2014 at 4:20
-
window.open(canvas.toDataURL())dandavis– dandavis2014-01-08 05:14:23 +00:00Commented Jan 8, 2014 at 5:14
Add a comment
|
3 Answers
Assuming your "Save as" button look something like this (uninitialized, see below):
<a href="#" id="saveas" download="">Save as</a>
Then when you have created the QR code on canvas do the following to initialize it:
/// QR created here..
var link = document.getElementById('saveas');
link.download = 'filename.png'; /// set a filename or a default
link.href = canvas.toDataURL(); /// create a data-uri as link
The key here is the new download attribute for the anchor tag. This will pop up a save as requester instead of navigating to the image.
You can also chose to hide the link and show it when it's initialized. You get the idea..
2 Comments
AGamePlayer
Thanks,
canvas.toDataURL() is a native supported method?var image = new Image();
image.src = canvas.toDataURL("image/png");
document.body.appendChild(image); // or whereever you want.
edit: onload event handler is only required for server-loaded images.
Comments
// create save tag then
var data = canvas.toDataURL(); // default is png add param image/jpg if you want to document.getElementById('save').href = data;
