0

Problem: I want to download a canvas as an image file (jpg/png).
This will work unless i don't use drawImage
to put an image on the canvas before i download it.

Question: I can download the image with right-click "save as",
but is there a way to download it with a button or link?

(My idea is a canvas where ppl can draw over images and save them.)

Fiddle without image (dl works): https://jsfiddle.net/Lawgqfwo/
Fiddle with image (dl does not work): https://jsfiddle.net/o5m4m8xp/

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");


// var img = new Image();
// img.src = "http://www.w3schools.com/tags/img_the_scream.jpg";
// ctx.drawImage(img, 10, 10);


// download button
var button = document.getElementById('btn-download');

button.addEventListener('click', function(e) {
  var dataURL = canvas.toDataURL('image/png');
  button.href = dataURL;
});
#canvas {
  background-color: lightgrey;
}
<canvas id="canvas"></canvas>
<a href="#" class="button" id="btn-download" download="meinBild.png">Download</a>
John
  • 760
  • 5
  • 12
  • 1
    Two problems. (1) You must give img time to load with `img.onload`, (2) You cannot use `.toDataURL` after drawing a cross-origin image on the canvas. – markE Mar 29 '16 at 03:12
  • 1
    Ok, that helps me out. Now i have to find a different approach. – John Mar 29 '16 at 21:01

0 Answers0