Canvas tutorial #7 (Images)

※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.5.에 작성된 글입니다.

※ 이 글은 해당사이트를 번역한 것입니다.

---

Draw Image

HTML5Canvas에서 이미지를 그리려면 이미지 객체와 대상 지점을 필요로 하는 drawImage( )를 사용할 수 있다.

대상 지점(destination point)은 캔버스 왼쪽 위 모서리를 기준으로 canvas의 왼쪽 위 모서리를 정의한다.

drawImage( )는 이미지 객체가 필요하므로 먼저 이미지를 생성한 후 로드될 때까지 기다려야 한다.

이미지 객체의 onload속성을 사용하여 이 작업을 수행할 수 있습니다.

context.drawImage(imageObj, X, Y);

ex) 예시 코드
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
const imageObj = new Image();

imageObj.onload = function() {
  context.drawImage(imageObj, 69, 50);
};
imageObj.src = 'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

---

Image Size

context.drawImage(imageObj, X, Y, Width, Height);

---

Image Crop

context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
/*
imageObj: 이미지 객체,
sourceX: 이미지 내에서의 X좌표,
sourceY: 이미지 내에서의 Y좌표,
sourceWidth: 이미지를 자를 가로 길이,
sourceHeight: 이미지를 자를 세로 길이,
destX: 브라우저 왼쪽으로 부터 멀어질 X값,
destY: 브라우저 위로 부터 멀어질 Y값,
destWidth: 브라우저에서 보여질 이미지의 가로 길이,
destHeight: 브라우저에서 보여질 이미지의 세로 길이
*/

---

Image Loader

HTML5Canvas application에서 여러 이미지를 사용할 경우엔 캔버스에 그리기 전에 미리 모든 이미지를 불러오는 것이 좋습니다. Load process를 단순화 하기 위해선 이미지 소스의 해시를 가져오고 이미지 해시를 생성한 다음 모든 이미지가 로드될 때마다 사용자 정의 함수를 호출하는 이미지 로더 기능을 사용하는 것이 편리합니다.

function loadImages(sources, callback) {
    const images = {};
    const loadedImages = 0;
    const numImages = 0;
    // get num of sources
    for (let src in sources) {
        numImages++;
    }
    for (let src in sources) {
        images[src] = new Image();
        images[src].onload = function () {
            if (++loadedImages >= numImages) {
                callback(images);
            }
        };
        images[src].src = sources[src];
    }
}
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

const sources = {
    darthVader: 'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
    yoda: 'https://www.html5canvastutorials.com/demos/assets/yoda.jpg'
};

loadImages(sources, function (images) {
    context.drawImage(images.darthVader, 100, 30, 200, 137);
    context.drawImage(images.yoda, 350, 55, 93, 104);
});