javascript - 下载空白页 (toDataURL())

Question

assets.forEach(function(v) {

    var canvas = document.createElement('canvas');
    canvas.id     = "canvas" + v.name;
    canvas.width  = 200;
    canvas.height = 150;
    var ctx = canvas.getContext("2d");

    var img = new Image();
    img.src = 'file:///path/to/file/' + v.name;
    img.onload = function () {
        ctx.drawImage(img, 0, 0, img.width, img.height-256, 0, 0, 200, 150);
    };

    // This is working. Renders correctly and visible.
    $('#test2').append(canvas);

    chrome.downloads.download({
        url: canvas.toDataURL(),
        filename: 'file:///path/to/file/test-' + canvas.id + '.png'
    });
});

大家好，这是我上面的代码。我正在尝试下载一个图像，该图像是 img 的较小版本。一切正常， Canvas 已创建，当附加到元素 $('#test2').append(canvas); 时我可以看到它。但是当我想下载它时，它会下载一个空白的。

我该如何解决这个问题？

Answer 1

调用 Image.onload 处理程序中的 download 方法，因为调用 download 方法时，Image 是尚未绘制

assets.forEach(function(v) {

  var canvas = document.createElement('canvas');
  canvas.id = "canvas" + v.name;
  canvas.width = 200;
  canvas.height = 150;
  var ctx = canvas.getContext("2d");

  var img = new Image();
  img.src = 'file:///path/to/file/' + v.name;
  img.onload = function() {
    ctx.drawImage(img, 0, 0, img.width, img.height - 256, 0, 0, 200, 150);
    $('#test2').append(canvas);

    chrome.downloads.download({
      url: canvas.toDataURL(),
      filename: 'file:///path/to/file/test-' + canvas.id + '.png'
    });
  };
});