onload関数がスキップされています

Question

2つのイメージをロードし、結合されたイメージのbase64エンコードを返すloadtexture関数を呼び出すmain関数がありますが、イメージを読み込もうとしているときにonload関数をスキップしています。

$(document).ready(function() { 
    var modelPath = "models/testhiddenUV.obj";  
    var texture = loadTexture(); 
    loadModel(texture, modelPath, "designCanvas"); 
}); 

function loadTexture() { 
var frontImage = new Image(); 
var backImage = new Image(); 
var canvas = document.getElementById("designCanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.fillStyle = "#FFF";   
ctx.fillRect(0,0,1024,1024); 
//skips whole onload functions to the end 
frontImage.onload = function() { 
    frontImage.src = "models/wine.jpg"; 
    ctx.drawImage(frontImage,0,0); 
    backImage.onload = function() { 
     backImage.onload = "models.petro21.jpg"; 
     ctx.drawImage(backimage, 804, 0); 
     return canvas.toDataUrl("image/png");  
    } 
}    

私にはコードが正しいように見えるので、実行する必要があります。私はonload関数で何か不足していますか？なぜそれらのコード行をスキップするのですか？

Answer 1

.onload 

は、非同期コールバックです。それを実行するには、それを呼び出す必要があります。そこで、基本的

は：

frontImage.onload = function() { 
    ctx.drawImage(frontImage,0,0); 
} 
frontImage.src = URL.createObjectURL("models/wine.jpg"); 

backImage.onload = function() { 
    ctx.drawImage(backimage, 804, 0);  
} 
backImage.src = URL.createObjectURL("whateverURIyouhave");