Invoke save as dialog on window.location pointed to image file

Question

I have this line of javascript to open an imagedata on a page

window.location.href = canvas.toDataURL('image/jpeg');

How can I make it invoke the save as dialog / download image so that the visitor can save the image immediately after image load?

Currently user needs to right click>save image as to save the image. It would be nice to automatically invoke save as dialog.

I found this that might work downloading file with save as dialog box in jsp...how to prompt user for save,view cancel dialog instead of directly opening image

But I don't know how to add response.setheader after the page/image loads. I tried this

window.location.href = canvas.toDataURL('image/jpeg');
response.setHeader('Content-Disposition', 'attachment; filename=' + <?php the_title(); ?> + '.jpg');

But it didn't work.

Thanks

Thanks. That is what I am trying to do but my page is generated by the canvas | canvas.toDataURL('image/jpeg'); |. It's not an actual page where I can hard code the header. Hence I need a means to inject the header using js or php way. — Wayne, Mar 22 '14 at 07:09

score 0 · Answer 1 · answered Jul 31 '16 at 22:51

You can you download attribute of a element for that. It causes the anchor element to invoke download dialog instead of loading targeted content in browser. Currently it's not supported by IE and Safari according to caniuse.

Following example shows in-place creation of temporary hidden a element. Download dialog is activated using click() method.

var url = 'data:image/png;base64,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';
var button = document.querySelector('button');
button.addEventListener('click', function() {
  var a = document.createElement('a');
  a.href = url;
  a.download = 'file-name.png';
  a.style = 'display: none';
  button.parentNode.appendChild(a);
  a.click();
  a.remove();
});

<button>download</button>

Invoke save as dialog on window.location pointed to image file

1 Answers1