Leere Seite wird heruntergeladen (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' 
    }); 
}); 

Hallo zusammen, das ist mein Code oben. Was ich versuche, ist ein Bild herunterzuladen, das eine kleinere Version von img ist. Alles funktioniert gut, die Leinwand ist erstellt, ich kann es sehen, wenn sie an ein Element $('#test2').append(canvas); angefügt wird. Aber wenn ich es herunterladen möchte, wird es leer heruntergeladen.

Wie kann ich das beheben?

Answer 1

Invoke download Methode in Image.onload Handler, wie durch die Zeit download Methode aufgerufen wird, ist Image noch nicht gezeichnet

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' 
    }); 
    }; 
});