context.drawImage() 약속과 함께로드 된 이미지로 작동하지 않습니다

Question

그래서 일부 이미지를로드해야하고 그 약속을 사용하고 있지만 이미지가 그려지지 않기 때문에 작동하지 않는 것 같습니다. 캔버스 (좌표가 같기 때문에 마지막 이미지 만 볼 수 있습니다.). 하지만 좋은 ol 'onload 이벤트를 사용하면 모든 것이 작동합니다. res.loadImage (...) 함수 (내가 browserify 사용하고 있습니다)있어 여기

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); 
    }); 
}); 

그리고 :

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

결의 기능 여기

는 이미지를로드하는 코드이다 즉시 호출되어 함수에 포함됩니다.

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

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