无法下载最终合并的画布

Question

我正在将 2 个画布合并到 1 个。

一切正常。

我只想通过点击下载这第三幅画布。我正在使用以下代码合并 2 个画布，然后下载最终的画布：

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();
}

但没有运气。我无法下载输出画布。

我在这段代码中找不到任何错误。

请帮忙。

谢谢

Answer 1

 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();

Answer 2

我知道这并不完全符合您的要求，但至少要排除一个可能的问题：

与其创建一个anchor并尝试动态地点击它，不如在页面上放置一个硬编码的anchor并手动点击它；

<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>

原因是要确保它没有被阻止，因为您尝试在没有用户交互的情况下进行下载，出于安全原因，这在某些浏览器中可能是一个问题。