canvas js로 구현하기 (7) - saving canvas painting [캔버스 그림 저장하기]

Notice

Recent Posts

Recent Comments

Link

« 2026/04 »
일	월	화	수	목	금	토
			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로 구현하기 (7) - saving canvas painting [캔버스 그림 저장하기] 본문

💻 Programming/Java Script

canvas js로 구현하기 (7) - saving canvas painting [캔버스 그림 저장하기]

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

saving canvas painting

캔버스에 그린 그림을 저장하는 방법을 알아보겠습니다.

[ html / css ]

1
2
3
4

<body>
   <canvas id="canvas" width="700" height="700"></canvas>
   <button class="saveBtn">save image</button>
</body>
Colored by Color Scripter

cs

 
html에서 캔버스와 세이브 버튼을 만들어 줍니다.
 
 

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

body {
  padding: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f7f7f7;
}
 
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: 40px;
}
 
button {
  background-color: rgba(0, 0, 0, 0.4);
  border: none;
  border-radius: 25px;
  color: #f7f7f7;
  height: 50px;
  width: 125px;
  font-size: 15px;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all ease-in-out 0.15s;
}
 
button:hover {
  background-color: #606060;
  scale: 1.1;
}
Colored by Color Scripter

cs

css로 캔버스와 버튼의 스타일을 꾸며줍니다.

[ js ]

1
2
3

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

cs

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

1
2
3
4
5

const canvas = document.querySelector("#canvas");
const saveBtn = document.querySelector(".saveBtn");
const ctx = canvas.getContext("2d");
 
saveBtn.addEventListener("click", onSaveClick);

cs

 
세이브 버튼에 클릭 이벤트를 추가해 클릭할 때마다 onSaveClick함수가 호출되도록 합니다.
 

1
2
3
4
5
6
7
8
9
10
11
12

const canvas = document.querySelector("#canvas");
const saveBtn = document.querySelector(".saveBtn");
const ctx = canvas.getContext("2d");
 
saveBtn.addEventListener("click", onSaveClick);
 
function onSaveClick() {
   const a = document.createElement("a");
   a.href = canvas.toDataURL();
   a.download = "drawing.png";
   a.click();
}
Colored by Color Scripter

cs

onSaveClick함수는 그림을 저장하는 함수로, a 태그를 생성해주고, 속성을 지정한 후 다운로드를 수행합니다.

캔버스에는 canvas.toDataURL이라는 메서드가 있는데,

그려진 내용을 base64로 인코딩된 문자열로 반환해 주는 메서드입니다. (그려진 내용을 Data URL로 변환한 것)

a 태그를 이용해 링크를 만들어 주고, 웹사이트로 링크하는 대신 이 이미지 url로 링크해줍니다.

그다음에 a 태그 안에 있는 download라는 속성을 더해줍니다.

그리고 a 태그 강제로 클릭 이벤트 발생시켜 다운 로드가 실행되도록 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const canvas = document.querySelector("#canvas");
const saveBtn = document.querySelector(".saveBtn");
const ctx = canvas.getContext("2d");
 
function onSaveClick() {
  if (confirm("Are you sure you want to save this image?")) {
    const a = document.createElement("a");
    a.href = canvas.toDataURL();
    a.download = "drawing.png";
    a.click();
  }
}

saveBtn.addEventListener("click", onSaveClick);
Colored by Color Scripter

cs

confirm() 메서드를 사용해 확인과 취소 버튼을 가진 메세지 창을 띄운 후,

if 조건문을 사용해 확인을 눌렀을 경우에만 이미지가 다운로드되도록 해줍니다.

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
39
40
41
42
43
44
45
46
47
48
49
50

const canvas = document.querySelector("#canvas");
const saveBtn = document.querySelector(".saveBtn");
const ctx = canvas.getContext("2d");
 
// 캔버스 대지 스타일과 선 스타일 설정하기
ctx.fillStyle = "white";
ctx.fillRect(0, 0, 700, 700);
ctx.lineWidth = 5;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.strokeStyle = "coral";
 
// 선그리기
let painting = false;
 
function onMouseMove(event) {
  if (!painting) {
    ctx.beginPath();
    ctx.moveTo(event.offsetX, event.offsetY);
  } else {
    ctx.lineTo(event.offsetX, event.offsetY);
    ctx.stroke();
  }
}
 
function startPainting() {
  painting = true;
}
 
function stopPainting() {
  painting = false;
}
 
canvas.addEventListener("mousemove", onMouseMove);
canvas.addEventListener("mousedown", startPainting);
canvas.addEventListener("mouseup", stopPainting);
canvas.addEventListener("mouseleave", stopPainting);
 
 
// 캔버스 이미지 저장하기
function onSaveClick() {
  if (confirm("Are you sure you want to save this image?")) {
    const a = document.createElement("a");
    a.href = canvas.toDataURL();
    a.download = "drawing.png";
    a.click();
  }
}
 
saveBtn.addEventListener("click", onSaveClick);

cs

 
전에 만들었던 선 그리기 함수를 추가해주었습니다. 
 
 
 

캔버스에 그림을 그린 후 세이브 버튼을 누르면 무사히 저장되는 것을 확인할 수 있습니다.

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

canvas js로 구현하기 (6) - canvas drawing image[캔버스에 이미지 출력하기 - 사진첨부] (1)	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

Coding Archive

canvas js로 구현하기 (7) - saving canvas painting [캔버스 그림 저장하기] 본문

canvas js로 구현하기 (7) - saving canvas painting [캔버스 그림 저장하기]

saving canvas painting

[ html / css ]

[ js ]

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

티스토리툴바