onload函數被跳過

我有我的主要功能，它調用我的loadtexture函數，它加載兩個圖像並返回組合圖像的base64編碼，但它試圖加載圖像時不斷跳過我的onload函數。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函數？爲什麼它跳過這些代碼行？

來源

2016-05-20 Tulip

我認爲你需要設置的onload外的圖片'src'。當指定的圖像url已經下載時，觸發'load'。 – Rhumborl

可能重複[JavaScript的onload函數沒有觸發]（http://stackoverflow.com/questions/21360910/javascript-onload-function-not-firing） – Rhumborl

.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");

來源

2016-05-20 12:50:00 Paul

我曾嘗試做像你的例子分開onload但它仍然沒有進入當我在這兩處放置斷點時的功能。我用我的正常src，因爲我不知道如何使用createObjectURL，它是拋出和錯誤在我的canvas.toDataURL。 – Tulip

onload函數被跳過

回答

相關問題