无法在其中保存图像<canvas>

Question

I'm still new to this whole canvas things and there's something I have a problem with, namely, saving the content inside the canvas as image. Here's my fiddle

 var img = new Image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); img.onload = function() { ctx.drawImage(img, 0, 0); img.style.display = 'none'; }; var link = document.createElement('a'); link.innerHTML = 'Save'; link.href = document.getElementById('canvas').toDataURL(); link.addEventListener('click', function(e) { link.download = "imagename.png"; }, false); document.body.appendChild(link); 

 <canvas id="canvas" width="300" height="300"></canvas> 

While the save dialog appears just fine, the saved image is empty, like it doesn't capture the content at all.

Any help is appreciated, moreso if it's accompanied by on how/why my code doesn't work and your code will. Thanks.

Edit: Forgot to link the fiddle I base my code from here The difference is that that fiddle saves the drawing in the canvas while what I wrote is merely saving a static image from another source.

Answer 1

You need to set image href inside of onload and use img.crossOrigin = "anonymous" just to avoid cross origin error.

 var img = new Image(); img.crossOrigin = "anonymous"; img.src = 'http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg'; var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); img.onload = function() { ctx.drawImage(img, 0, 0, 300, 300); link.href = document.getElementById('canvas').toDataURL(); }; var link = document.createElement('a'); link.innerHTML = 'Save'; //link.href = document.getElementById('canvas').toDataURL(); link.addEventListener('click', function(e) { link.download = "imagename.png"; }, false); document.body.appendChild(link); 

 <canvas id="canvas" width="300" height="300"></canvas> 

Answer 2

There are two issues.

The first is the image's origin. On JSFiddle you'll get an Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

• As mentioned in another answer, Base64 encoding the image then setting img.src = 'data:image/jpeg;base64,/...'; resolves this problem.
• Another solution: run a web server locally, and source the image by its location on the server, eg img.src = './rhino.jpg'; .

Even after that's handled, the downloaded image will be "empty," as before. This is because of the order of execution of your code. link.href = canvas.toDataURL(); executes before the image's 'load' event fires, so the canvas is empty at the point you're setting the data.

• Placing that line inside the img.onload function ensures that the link's download data is set only after the image has loaded. This approach is convenient, because it allows for the <a> tag to behave with default behavior once the href attribute is set (eg pointer on hover, underlined text by default).
• Placing that line, instead, inside the link's 'click' event handler incidentally works, but you lose the default link behavior mentioned above.

---

Here's an example of the working JS, assuming the image file is on the server:

 var img = new Image(); img.src = './rhino.jpg'; var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var link = document.createElement('a'); link.innerHTML = 'Save'; img.onload = function() { ctx.drawImage(img, 0, 0); img.style.display = 'none'; link.href = canvas.toDataURL(); }; link.addEventListener('click', function(e) { link.download = "imagename.png"; }, false); document.body.appendChild(link); 

And a JSFiddle , using the Base-64 encoded image.