Question

我在1上合并2个画布。

一切正常。

我只想点击下载第3张画布。我使用下面的代码合并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

我知道这不是你要求的，但至少要排除一个可能的问题：

不是创建锚并尝试动态点击，而是在页面上放置一个硬编码的锚并手动点击它;

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

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

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

无法下载最终合并的画布

2 个答案: