url에서 이미지 객체로 로딩하는 동안 이미지를 캔버스에 일정하게 그리기

Question

자바 스크립트를 사용하여 HTML Canvas 요소에 여러 이미지를 그려 넣으려고합니다. 이미지는 URL로 저장되고 자바 스크립트 이미지 객체의 src에 할당됩니다. 문제는 이미지를 특정 순서로로드해야한다는 것입니다. 여기 내 코드는 지금까지 있습니다 : 이미지로드 및 이미지를 나중에 추가 된 이전하기 전에로드 할 수있는 기회를 기다리고 있으므로

var canvas = document.getElementById("render"); 
var context = canvas.getContext("2d"); 

var src = ["image.png","image.png","image.png","image.png"]; 


var image = [new Image,new Image,new Image,new Image,]; 

for (var i =0;i<image.length;i++) { 
    image[i].onload = function() { 
     context.drawImage(image[i],0,0,canvas.width,canvas.height); 

    } 
    image[i].src=src[i]; 
} 

나는이 문제가 image.onload 기능을 믿습니다. 그러나 나는 확신 할 수 없다.

순수 js가 바람직하지만 필수는 아닙니다.

Answer 1

그림에서 load 청취자를 분리해야합니다. 지금은 이미지가로드되는 즉시 즉시 드로잉합니다. Promise에 이미지로드를 감싸고 Promise.all()을 사용하십시오. 이렇게하면 모든 순서로 이미지를로드 할 수 있지만 지정한 순서대로 다시 표시됩니다.

/** 
* Promisify loading an image 
* @param {String} imagePath The web location of the image 
* @returns {Promise} A Promise that will resolve to an Image 
*/ 
function loadImage(imagePath) { 
    return new Promise((resolve, reject) => { 
     let image = new Image(); 
     image.addEventListener("load",() => { 
      resolve(image); 
     }); 
     image.addEventListener("error", (err) => { 
      reject(err); 
     }); 
     image.src = imagePath; 
    }); 
} 

var canvas = document.getElementById("render"), 
    context = canvas.getContext("2d"), 
    imageSources = ["image.png", "image.png", "image.png", "image.png"]; 

Promise 
    .all(imageSources.map(i => loadImage(i))) 
    .then((images) => { 
     images.forEach((image) => { 
      context.drawImage(image, 0, 0, canvas.width, canvas.height); 
     }); 
    }).catch((err) => { 
     console.error(err); 
    });