How to save a png from javascript variable

Question

I have an image encoded in base64 in a javascript variable : data:image/png;base64, base64 data

[EDIT] I need to save that file to disk without asking to the visitor to do a right click [/EDIT]

Is it possible ? How ?

Thanks in advance

Best regards

You can't. You can read this post.

Spilarix
– Spilarix

2010-10-11 12:28:47 +00:00
Commented Oct 11, 2010 at 12:28 — Spilarix
– Spilarix, Commented Oct 11, 2010 at 12:28

Community · Accepted Answer · 2017-05-23 12:26:19Z

47

I know this question is 2 years old, but hopefully people will see this update.

You can prompt the user to save an image in a base64 string (and also set the filename), without asking the user to do a right click

var download = document.createElement('a');
download.href = dataURI;
download.download = filename;
download.click();

Example:

var download = document.createElement('a');
download.href = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
download.download = 'reddot.png';
download.click();

In order to trigger a click event using Firefox, you need to do what it is explained in this SO answer. Basically:

function fireEvent(obj,evt){
  var fireOnThis = obj;
  if(document.createEvent ) {
    var evObj = document.createEvent('MouseEvents');
    evObj.initEvent( evt, true, false );
    fireOnThis.dispatchEvent( evObj );
  } else if( document.createEventObject ) {
    var evObj = document.createEventObject();
    fireOnThis.fireEvent( 'on' + evt, evObj );
  }
}
fireEvent(download, 'click')

As of 20/03/2013, the only browser that fully supports the download attribute is Chrome. Check the compatibility table here

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Jan 1, 2013 at 2:33

davoclavo

1,44216 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mike Gledhill Over a year ago

Worked perfectly in Chrome, but didn't do anything in IE8 running with Google Chrome Frame.

davoclavo Over a year ago

If you are using jQuery, use $(download).click(). If you are not using jQuery, check this other SO question

malber Over a year ago

I think this does not work with FF, IE. It does not even react to the event, this could lead to the user wondering what's going on.

Benjamin G Over a year ago

how do I save it in a directory?

Orion Over a year ago

Fantastic answer. very simple to use.

|

BalusC · Accepted Answer · 2010-10-11 12:47:09Z

6

... without asking to the visitor anyhing ... Is it possible?

No, that would have been a security hole. If it was possible, one would be able to write malware to the enduser's disk unaskingly. Your best bet may be a (signed) Java Applet. True, it costs a bit of $$$ to get it signed (so that it doesn't pop security warnings), but it is able to write data to enduser's disk without its permission.

edited Oct 11, 2010 at 12:47

answered Oct 11, 2010 at 12:28

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

Comments

malber · Accepted Answer · 2013-04-02 14:49:05Z

6

I am surprised nobody here mentioned using HTML5 blobs together with a couple of nice libraries.

You first need https://github.com/eligrey/FileSaver.js/ and https://github.com/blueimp/JavaScript-Canvas-to-Blob.

Then you can load the image into a canvas

base_image = new Image();
base_image.src ='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

the canvas into a blob

var canvas = document.getElementById('YourCanvas');
context = canvas.getContext('2d');
// Draw image within
context.drawImage(base_image, 0,0);

and finally save it

x_canvas.toBlob(function(blob) {
saveAs(blob, "screenshot.png");
}, "image/png");

FF is not fully supported but at least you get a separate page with the image.

Check this out: http://jsfiddle.net/khhmm/9/

EDIT: this is not compatible with Safari / Mac.

edited Apr 2, 2013 at 14:49

answered Mar 19, 2013 at 15:54

malber

1,0734 gold badges16 silver badges24 bronze badges

3 Comments

telefunkenvf14 Over a year ago

Suppose JS is used to draw encoded data to the canvas and that the image is not cached in any way in browser-----Is it still possible to dump the canvas (perhaps "duplicate" would be a better term) and then programmatically save it in my browser's cache (or elsewhere)? Do you have a blog or some other contact point? (possible consulting offer?)

malber Over a year ago

Sorry I am not sure how you can achieve this.

Vinny Over a year ago

Thanks! This saved me a lot of heartache. I had gotten to Blob and FileSaver.js but couldn't figure out how to put them together. Great stuff.

user323094 · Accepted Answer · 2010-10-11 13:23:47Z

3

As other answers already stated, you cannot do it only with javascript. If you want, you can send the data (using normal HTTP POST) to a PHP script, call header('Content-type: image/png') and output the decoded image data to the page using echo base64_decode($base64data).

This will work just as if user clicked on an image and open it or prompt him to save the file to disk (the normal browser's save file dialog).

answered Oct 11, 2010 at 13:23

user323094

3,6734 gold badges23 silver badges30 bronze badges

Comments

Jerod Venema · Accepted Answer · 2010-10-11 12:29:16Z

2

It's not possible.

If it was, browsers would be massively insecure, being able to write random data to your hard disk without user interaction.

answered Oct 11, 2010 at 12:29

Jerod Venema

44.7k5 gold badges70 silver badges109 bronze badges

Comments

oezi · Accepted Answer · 2010-10-11 12:41:23Z

1

with javascript, you can't. the only real possibility i can think of will be a java-applet, but maybe (i don't know how long that image should be saved) you could simply add an img-tag with you png and force caching (but if the user deletes his cache, the image will be gone).

answered Oct 11, 2010 at 12:41

oezi

51.9k10 gold badges102 silver badges119 bronze badges

Comments

Julio Santos · Accepted Answer · 2010-10-11 12:31:39Z

0

I think it's possible with JavaScript if you use ActiveX.

Another possibility is to make the server spit out that file with a different mime type so the browser asks the user to save it.

answered Oct 11, 2010 at 12:31

Julio Santos

3,8952 gold badges29 silver badges47 bronze badges

1 Comment

BalusC Over a year ago

Using ActiveX restricts you however to a single webbrowser type (MSIE) and even then, MSIE in its default setup will scare the enduser with all kinds of security warnings before continuing. ActiveX, no thanks.

ionutcib · Accepted Answer · 2011-07-14 19:19:43Z

0

I think you can do it something(maybe not only with javascript...xul programming needed). There are Firefox addons that save images to a folder(check Firefox addons site)

answered Jul 14, 2011 at 19:19

ionutcib

2771 gold badge3 silver badges10 bronze badges

1 Comment

Igor Zinov'yev Over a year ago

I'm sorry, but "I think you can, go check the addons" is not an answer.

Footer · Accepted Answer · 2016-09-12 02:37:18Z

0

You can make this file as blob on the server and use setTimeout function in order to fire the download.

answered Sep 12, 2016 at 2:37

Footer

1394 bronze badges

Comments

Nate · Accepted Answer · 2022-05-12 07:39:08Z

0

The accepted solution seems to have a limitation for large data. If you're running into this (instead of the downloaded file's name, I see "download" and "Failed - Network error" in Chrome), here's what I did in order to download a 2mb file:

const blob = await (await fetch(document.getElementById('canvasID').toDataURL())).blob();
const file = new File([blob], {type:"image/png", lastModified: new Date()});
var a = document.createElement('a');
a.href = window.URL.createObjectURL(file);
a.download = 'image.png';
a.click();

answered May 12, 2022 at 7:39

Nate

1,2701 gold badge13 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to save a png from javascript variable

10 Answers 10

6 Comments

Comments

3 Comments

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

6 Comments

Comments

3 Comments

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related