not able to download final merged canvas

问题

I am merging 2 canvas on 1.

Everything works fine.

I just want to download this 3rd canvas on a click. I am using below code for merging 2 canvas and than download the final canvas:

function downloadCanvas() {
  var bottleCanvas = document.getElementById('canvas_thumb');
  var designCanvas = document.getElementById('canvas');
  var finCanvas = document.getElementById('finalcanvas');

  var bottleContext = finCanvas.getContext('2d');
  bottleContext.drawImage(bottleCanvas, 0, 0);
  bottleContext.drawImage(designCanvas, 0, 320);


  var link = document.createElement('a');
  link.href = finCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  
  link.download = "imagename.png";

  link.click();
}

But no luck. I am not able to download the output canvas.

I am not able to find any error in this code.

Please help.

Thanks

回答1:

I know this isn't exactly what you asked for, but to at least rule out one possible issue:

Rather than create an anchor and try to click it dynamically, place a hardcoded anchor on the page and manually click it;

<a href="javascript:void(0)" onclick="downloadTest(this)">click me</a>

<script>

function downloadTest(link) {
  link.href = finCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  
  link.download = "imagename.png";
return true;
}

</script>

Reason being to ensure it isn't being blocked because you are trying to download without user interaction which can be a problem in some browsers for security reasons.

回答2:

 var dataURL = finCanvas.toDataURL("image/png");
  var link = document.createElement('a');

  link.href = finCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
  link.download = "design.png";
  link.click();

来源：https://stackoverflow.com/questions/33803418/not-able-to-download-final-merged-canvas