[JavaScript] 자바스크립트에서 캔버스에 이미지 붙여넣기
2022. 7. 27. 17:19ㆍProgram/JavaScript
205_자바스크립트에서 캔버스에 이미지 붙여넣기
[적용]
- 외부의 이미지를 캔버스에 표시하고 싶을 때
[문법]
| 속성 | 의미 | 타입 |
| context.drawImage(image, x, y) | 캔버스 요소에 이미지 그리기 | 없음 |
[내용]
Image 객체와 drawImage()를 사용해 캔버스 요소에 이미지를 표시한다.
Image 객체의 로딩이 완료되지 않으면 캔버스에 이미지를 그릴 수 없으므로 onload를 사용해 미리 로딩 작업을 처리한다.
drawImage()의 두 번째와 세 번째 인수는 좌표 위치를 전달한다.
HTML index.html
<body>
<canvas id="my-canvas" width="100" height="120"></canvas>
</body>JavaScript main.js
// 캔버스 요소 참조
const canvas = document.querySelector('#my-canvas');
// 콘텍스트 가져오기
const context = canvas.getContext('2d');
// Image 인스턴스 생성
const img = new Image();
// 이미지 로딩 후 처리
img.onload = () => {
// 콘텍스트로 캔버스에 그리기
context.drawImage(img, 0, 0);
};
// 이미지 로딩 시작
img.src = 'sample.jpg';
실행결과
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트에서 이미지의 RGBA 값 확인하기 (0) | 2022.07.27 |
|---|---|
| [JavaScript] 자바스크립트에서 캔버스 화소 정보 다루기 (0) | 2022.07.27 |
| [JavaScript] 자바스크립트에서 캔버스 요소 색칠하기/선 그리기 (0) | 2022.07.27 |
| [JavaScript] 자바스크립트에서 캔버스 사용하기 (0) | 2022.07.26 |
| [JavaScript] 자바스크립트에서 SVG 그래픽 다운로드하기 (0) | 2022.07.26 |