Javascript Canvas drawImage 이미지 추가 방법

Javascript Canvas drawImage 이미지 추가 방법

 

Canvas에 이미지를 추가하기 위해서는 CanvasRenderingContext2D.drawImage() 를 활용합니다.

파라미터의 개수에 따라 

일반 이미지 추가와 추가할 이미지의 일부 영역을 추가로 구분됩니다.

 

일반 이미지 추가 문법은 아래와 같습니다.

 

일반 이미지 추가 문법

drawImage(image, sx, sy, sWidth, sHeight);

 

파라메터 설명

 

[image]*필수

CSSImageValue, an HTMLImageElement, an SVGImageElement, an HTMLVideoElement, 

an HTMLCanvasElement, an ImageBitmap, or an OffscreenCanvas.

 

[sx]*필수

이미지 왼쪽 상단 모서리가 위치할 Canvas내 X 좌표

 

[sy]*필수

이미지 왼쪽 상단 모서리 가 위치할 Canvas 내 Y 좌표

 

[sWidth]

이미지의 넓이 설정

 

[sHeight]

이미지의 높이 설정

 

예제1

<canvas id="canvas" width="324" height="68" style="border: 2px solid red;">
<input type="file" id="imageTest">

<script>
const CANVAS = document.getElementById("canvas");
const CTX = CANVAS.getContext("2d");

const addImage = function(file){
    const image = new Image;
    image.onload = function(){
        CTX.drawImage(image, 10, 10);
    }
    image.src = URL.createObjectURL(file);
}
const file = document.getElementById("imageTest");
file.addEventListener("change", function(e){
    e.preventDefault();
    addImage(e.target.file[0]);
});

 

예제1 결과

(10, 10) 위치에 24x32 사이즈 이미지 추가

 

예제2

CTX.drawImage(image, 10, 10, 12, 16);

 

예제2 결과

(10, 10) 위치에 12x16 사이즈 이미지 추가

 

 

 

---

 

추가할 이미지의 일부 영역 추가 문법

drawImage(image, sx, sy, ex, ey, x, y, dWidth, dHeight);

 

[image]*필수

CSSImageValue, an HTMLImageElement, an SVGImageElement, an HTMLVideoElement, 

an HTMLCanvasElement, an ImageBitmap, or an OffscreenCanvas.

 

[sx]*필수

잘라낼 이미지의 좌측상단 X 좌표

 

[sy]*필수

잘라낼 이미지의 좌측상단 Y 좌표

 

[ex]*필수

잘라낼 이미지의 우측하단 X 좌표

 

[ey]*필수

잘라낼 이미지의 우측하단 Y 좌표

 

[x]*필수

잘라낸 이미지를 추가할 켄버스의  X 좌표

 

[y]*필수

잘라낸 이미지를 추가할 켄버스의  Y 좌표

 

[dWidth]*필수

잘라낸 이미지의 넓이 값

 

[dHeight]*필수

잘라낸 이미지의 높이 값

 

예제3

CTX.drawImage(image, 0, 0, 12, 32, 10, 10, 24, 32);

 

예제3 결과

이미지의 (0, 0) 부터 (12, 32) 까지 잘라서(기존 이미지의 반) (10, 10) 위치에 24x32 크기로 추가