canvas js로 구현하기 (6) - canvas drawing image[캔버스에 이미지 출력하기

Notice

Recent Posts

Recent Comments

Link

« 2026/06 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Tags more

Archives

Today

Total

관리 메뉴

Coding Archive

canvas js로 구현하기 (6) - canvas drawing image[캔버스에 이미지 출력하기 - 사진첨부] 본문

💻 Programming/Java Script

canvas js로 구현하기 (6) - canvas drawing image[캔버스에 이미지 출력하기 - 사진첨부]

코등어 2022. 10. 7. 10:11

canvas drawing image

캔버스에 사진을 첨부할 수 있는 방법을 알아보겠습니다.

[ html / css ]

1
2
3
4

<body>
    <canvas id="canvas" width="700" height="700"></canvas>
    <input type="file" accept="image/*" id="file" />
</body>
Colored by Color Scripter

cs

accept 속성을 추가해 첨부하려는 file을 특정할 수 있습니다. (accept="image/*" ->모든 이미지 파일을 허용한다는 의미)

이렇게 input file을 만들게 되면 위의 기본 스타일처럼 그려지게 됩니다.

하지만 css를 변경할 수 없기 때문에 스타일을 변경하고 싶은 경우라면 label을 사용해 해결할 수 있습니다.

1
2
3
4
5
6
7

<body>
    <canvas id="canvas" width="700" height="700"></canvas>
    <label for="file">
      Add Photo
      <input type="file" accept="image/*" id="file" />
    </label>
</body>
Colored by Color Scripter

cs

라벨 태그의 for 속성을 이용해 input file 태그와 연결을 시켜주면, label을 클릭했을 때 input file을 클릭한 것처럼 동작하게 됩니다.

* 이때<input type="file" accept="image/* "id="file" />은 위의 코드처럼 label 태그 안에 넣을 수도, 밖에 빼서 작성할 수도 있습니다.

이후에 css를 사용해 스타일을 변경해줍니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

body {
  padding: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.03);
}
 
canvas {
  background-color: white;
  border-radius: 5%;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
}
 
input {
  display: none;
}
 
label {
  font-family: "Source Sans Pro";
  width: 100px;
  padding: 8px 18px;
  border: 1.5px #ff6600 solid;
  background-color: #ff6600;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  transition: all 0.2s ease-in-out;
}
 
label:hover {
  border: 1.8px #ff6600 solid;
  background-color: transparent;
  color: #ff6600;
}
Colored by Color Scripter

cs

input file에 display: none;을 해주면 브라우저에서 안 보이게 됩니다.

결과적으로 스타일을 적용시킨 label만 보이게 됩니다.

[ js ]

1
2
3

const canvas = document.querySelector("#canvas");
const imgFile = document.querySelector("#file");
const ctx = canvas.getContext("2d");

cs

먼저 canvas와 input file에 접근할 수 있도록 만들어 주고, 2d 모드의 그리기 객체를 가져와 캔버스에 그림을 그릴 수 있도록 합니다.

1
2
3
4
5
6

const canvas = document.querySelector("#canvas");
const imgFile = document.querySelector("#file");
const ctx = canvas.getContext("2d");
 
imgFile.addEventListener("change", drawImg);
// = imgFile.onchange = drawImg;

cs

input file에 change 이벤트를 추가해주고, 변경이 일어날 때마다 drawImg 함수가 호출되도록 해줍니다.

* 이벤트 타입 중 change는 폼 컨트롤 값(value 값)이 변경되었을 때 발생하며, input(text, radio, checkbox), textarea, select 태그에 적용됩니다.

브라우저의 자바스크립트는 아직 파일을 읽을 수 없습니다.

파일은 유저가 파일을 선택했을 때만 자바스크립트에 보이게 되고, 파일을 선택하게 되면 그 파일은 이제 브라우저의 메모리 속에 있게 됩니다.

파일 url을 가지고 그 파일에 접근해서 볼 수 있게 해야합니다.

그러기 위해서는 아래와 같은 방법이 필요합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

const canvas = document.querySelector("#canvas");
const imgFile = document.querySelector("#file");
const ctx = canvas.getContext("2d");
 
function drawImg(event) {
  //1
  const file = event.target.files[0];
  //2  
  const url = URL.createObjectURL(file);
  //3
  const img = new Image();
  //4
  img.src = url;
  //5
  img.onload = function () {
    ctx.drawImage(img, 0, 0, 700, 700);
  };
}
 
imgFile.addEventListener("change", drawImg);

cs

1. 먼저 첨부되는 파일을 가져옵니다.

2. 브라우저의 메모리에서 그 파일의 url을 얻어옵니다.

3. new Image()를 사용해 새로운 이미지를 만들어 줍니다.

const image = new Image()는 html에서 <img src=""/> 태그를 쓰는 것과 동일합니다.

4. 이미지의 src에 브라우저의 메모리를 가리키는 url을 넣어줍니다.

5. 그다음 이미지에 이벤트 핸들러를 추가해줍니다.

이미지가 로드되었을 때, 즉 onload일 때, 함수를 실행시킬 건데, 여기서는 drawImage()라는 ctx method를 호출합니다.

* drawImage(image, x좌표, y좌표, 너비, 높이)

drawImage()는 이미지와 위치를 필요로 합니다. 너비와 높이는 옵션으로 생략 시에는 원본 크기대로 이미지를 출력합니다.

캔버스에 이미지 파일이 무사히 출력되는 것을 확인할 수 있습니다.

'💻 Programming > Java Script' 카테고리의 다른 글

canvas js로 구현하기 (7) - saving canvas painting [캔버스 그림 저장하기] (0)	2022.10.07
canvas js로 구현하기 (5) - canvas drawing text [캔버스에 텍스트 출력하기] (0)	2022.10.05
canvas js로 구현하기 (4) - canvas color palette [캔버스 브러시 색 바꾸기] (2)	2022.10.04
canvas js로 구현하기 (3) - canvas drawing mode변경하기(fill/draw) (0)	2022.10.01
canvas js로 구현하기 (2) - 그리기 함수 만들기 (0)	2022.09.29

'💻 Programming/Java Script' Related Articles

Comments