Question

所以，我必须加载一些图像，我正在使用这样做的承诺，但它似乎不起作用，因为图像没有被绘制到画布上（我只希望看到最后一个图像，因为坐标是相同的，但仍然）。但是，如果我使用好的'onload事件，一切正常。

这是加载图像的代码：

document.addEventListener("DOMContentLoaded", function(){
    canvas=document.getElementById("canvas");

    var blockNames=[0, 1, 2, 3, 4, 5, 6].map(function(e){
        return "assets/block"+e+".png";
    }); //create an array with paths here

    Promise.all(blockNames.map(function(e){
        return res.loadImage(e);
    })).then(function(result){ //when every promise is fulfilled, draw the current image onto the canvas
        result.map(function(e){
            var context=canvas.getContext("2d");
            context.drawImage(e, 20, 20);
        });
    }).catch(function(err){
        console.log("error: "+err);
    });
});

这是res.loadImage（...）函数（我正在使用browserify）：

var loadImage=function(path){
    return new Promise(function(resolve, reject){
        var img=new Image();
        img.onload=resolve.call(null, img);
        img.onerror=reject.call(null, img);
        img.src=path;
    });
};

Answer 1

立即调用resolve函数，将其包装在函数中：

img.onload = function() {
    resolve.call(null, img);
};

img.onerror = function() {
    reject.call(null, img);
};

context.drawImage（）不支持使用promise加载的图像

1 个答案: