下載空白頁（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的較小版本的圖像。這一切正常，畫布創建，我可以看到它附加到一個元素$('#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' 
    }); 
    }; 
});