toDataUrl觸發前圖像加載

Question

我越來越試圖創建畫布繪圖，但是當我使用toDataUrl時，它會返回空的畫布文件。

這可能是因爲toDataUrl在我的圖像被加載之前已經觸發了，所以我如何改變它，以便我嘗試加載的圖像是canvas文件的一部分。

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

var img = new Image(); 
img.addEventListener("load", function() { 
    ctx.drawImage(img, 0, 0, 800, 420); 
}, false); 
img.src = "images/quizes/sim.png"; 

var img1 = new Image(); 
img.addEventListener("load", function() { 
    ctx.drawImage(img1, 0, 0, 320, 320); 
}, false); 
ctx.drawImage(img1, 0, 0, 320, 320); 
img1.src = "images/users/alfred.jpg"; 

var img2 = new Image(); 
img.addEventListener("load", function() { 
    ctx.drawImage(img2, 480, 0, 320, 320); 
}, false); 
img2.src = "images/users/brynjar.jpg"; 

var dataURL = canvas.toDataURL(); 

$.ajax({ 
    type: "POST", 
    url: "script.php", 
    data: { 
     imgBase64: dataURL 
    } 
}).done(function(o) { 
    console.log('saved'); 
}); 

Answer 1

使用的承諾（在大多數的IE不支持）

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

function loadImage(image, x, y, width, height) { 
    return new Promise(function(resolve, reject) { 

    var img = new Image(); 
    img.onload = function() { 
     ctx.drawImage(img, x, y, width, height); 
     resolve(image); 
    }; 
    img.onerror = reject; 
    img.src = image; 
    if (img.complete) img.onload(); 
    }); 
} 


var img1 = loadImage("images/quizes/sim.png", 0, 0, 800, 420); 
var img2 = loadImage("images/users/alfred.jpg", 0, 0, 320, 320); 
var img3 = loadImage("images/users/brynjar.jpg", 480, 0, 320, 320);  

Promise.all([img1, img2, img3]).then(function(value) { 

    console.log(value); 
    var dataURL = canvas.toDataURL(); 

    $.ajax({ 
    type: "POST", 
    url: "script.php", 
    data: { 
     imgBase64: dataURL 
    } 
    }).done(function(o) { 
    console.log('saved'); 
    }); 
}, function(reason) { 
    console.error(reason); 
}); 

如果需要IE瀏覽器，也有重建的支持PollyFills。其他選項是使用計數器。

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

function loadImage(image, x, y, width, height) { 

    var img = new Image(); 
    img.onload = function() { 
    ctx.drawImage(img, x, y, width, height); 
    count++; 
    if (count === totalCount) { 
     allLoaded(); 
    } 
    }; 
    img.onerror = function() { 
    alert("You have a problem"); 
    }; 
    img.src = image; 
    if (img.complete) img.onload(); 

} 


function allLoaded() { 
    var dataURL = canvas.toDataURL(); 

    $.ajax({ 
    type: "POST", 
    url: "script.php", 
    data: { 
     imgBase64: dataURL 
    } 
    }).done(function(o) { 
    console.log('saved'); 
    }); 
} 

var count = 0; 
var totalCount = 3; 
var img1 = loadImage("images/quizes/sim.png", 0, 0, 800, 420); 
var img2 = loadImage("images/users/alfred.jpg", 0, 0, 320, 320); 
var img3 = loadImage("images/users/brynjar.jpg", 480, 0, 320, 320);