• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 661
  • Last Modified:

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

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
andrewaiello
Asked:
andrewaiello
  • 4
  • 3
1 Solution
 
leakim971PluritechnicianCommented:
0
 
andrewaielloAuthor Commented:
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
 
leakim971PluritechnicianCommented:
The extension is missing but the filetype is the right one
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
andrewaielloAuthor Commented:
Okay I will look into it; can I specify the output filename explicitly?  
0
 
leakim971PluritechnicianCommented:
not the way you want it << immedate >>
you need the server side.
0
 
andrewaielloAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now