Question

我有我的main函数调用我的loadtexture函数来加载两个图像并返回组合图像的base64编码，但它在尝试加载图像时不断跳过我的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");

onload函数被跳过

1 个答案: