?
Solved

Immediate Save Dialogue to Download HTML5 Canvas Image - Not Saving on Server

Posted on 2011-10-21
7
Medium Priority
?
656 Views
Last Modified: 2012-05-12
I am working on a purely JS/HTML page where the user can upload an image and the image is converted to canvas data and displayed. Then the user can click on a button to have alterations performed to the pixel data, changing the display.

Now, if the user wants to save the image they can right click and do a save as and they are prompted to save the image as canvas.png; I would prefer, however, to just have a button "download image" that the user can click to pop up the standard save dialogue box.

My question is how can make such a button, that pulls the canvas data into a standard image download prompt?

Here are some more details:

If you do a "view image" on the displayed image the url it goes to is like this: data:image/png;base64,iVBORw0KGgoAA (lots more stuff)
0
Comment
Question by:andrewaiello
  • 4
  • 3
7 Comments
 
LVL 83

Expert Comment

by:leakim971
ID: 37008602
0
 
LVL 1

Author Comment

by:andrewaiello
ID: 37008985
It looks like that demo doesn't exactly work right; clicking save as PNG brings up the save dialogue, but the file type is .pict.  Ideally I would like it to have a specified name like output.png or some such.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 37009089
The extension is missing but the filetype is the right one
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:andrewaiello
ID: 37009174
Okay I will look into it; can I specify the output filename explicitly?  
0
 
LVL 83

Expert Comment

by:leakim971
ID: 37009215
not the way you want it << immedate >>
you need the server side.
0
 
LVL 1

Author Comment

by:andrewaiello
ID: 37009228
Ahh, so I have to implement PHP or some such just to give the dialogue save file a specific name?  That's kind of annoying. :(
0
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 37009248
yes
here the author of the script found a tip using javascript :

window.location.href = " ..... image data base64 encoded .... "; // no way to specify the filename
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

621 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question