下載空白頁（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的較小版本的img 。 一切正常，創建了畫布，將其附加到元素$('#test2').append(canvas);可以看到它$('#test2').append(canvas); 。 但是當我要下載它時，它會下載空白。

我怎樣才能解決這個問題？

Answer 1

調用download方法Image.onload處理程序的時候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'
    });
  };
});