Почему этот метод загрузки .toBlob () требует двух кликов для работы?

Question

Я хочу сделать загружаемым изображение на элементе canvas ("canvas").

Я не могу использовать правый клик> сохранить как, поскольку фактический используемый холст скрыт.Пользователь увидит только уменьшенное представление полноразмерного изображения на отдельном холсте.

Мне удалось выполнить эту работу с использованием .toDataURL, но это не удалось, когда изображения / полотна стали определенного размера.Я пытаюсь бороться с этим с помощью .toBlob ().

Мне удалось заставить работать нижеприведенное, но сначала требуется два щелчка для запуска, и требуется два щелчка снова каждый раз, когда изображение меняется.

Загрузить Canvas в формате 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>