Question

我想将图像下载到画布元素（“画布”）上。

我不能使用右键单击>另存为，因为使用的实际画布是隐藏的。用户将只能在单独的画布上看到较小尺寸的全尺寸图像。

我可以使用.toDataURL进行此工作，但是当图像/画布达到一定大小时，此操作失败。我正在尝试使用.toBlob（）来解决这个问题。

我已经能够执行以下操作，但是最初需要两次点击才能触发，并且每次更改图像时都需要再次点击两次。

将画布下载为PNG

var link = document.getElementById("download");

link.onclick = function() {

  link.download = "image.png";

  canvas.toBlob(function(blob){
    link.href = URL.createObjectURL(blob);
  },'image/png');
}

如何避免每次更改画布图像时都需要单击两次？

Answer 1

.toBlob()是异步的（因此将函数用作参数）。
您必须等到该功能完成工作后才能触发下载。

var link = document.getElementById("download");
link.onclick = function() {
  document.querySelector("canvas").toBlob(function(blob){
    // here the conversion has finished
    // to trigger the download (again) we use a dummy link
    var a = document.createElement("a");
    a.download = "image.png";
    a.href = URL.createObjectURL(blob);
    a.click();
  },'image/png');
};

示例

var link = document.getElementById("download");
link.onclick = function() {
  document.querySelector("canvas").toBlob(function(blob) {
    var a = document.createElement("a");
    a.download = "image.png";
    a.href = URL.createObjectURL(blob);
    a.click();
  }, 'image/png');
};

var change = document.getElementById("change");
change.onclick = function() {
  var c = document.querySelector("canvas"),
    ctx = c.getContext("2d");

  ctx.fillStyle = getRandomColor();
  ctx.fillRect(0, 0, c.width, c.height);
};
change.onclick();

function getRandomColor() {
  return "rgb(" + (~~(Math.random() * 256)) + "," + (~~(Math.random() * 256)) + "," + (~~(Math.random() * 256)) + ")";
}

<a href="#" id="download">Download</a>&nbsp;<a href="#" id="change">Change canvas</a>
<br />
<canvas width="2000" height="2000"></canvas>

为什么下载画布的.toBlob（）方法需要两次单击才能起作用？

1 个答案: