Canvas 지우기, 초기화하기, 그림으로 저장

목표

 

지우개, 전체지우기, 저장하기 버튼 만들기

 

지우개 버튼 - 선의 색을 흰색(배경색)으로 바꾼다.

전체지우기 - 그려져 있던 모든 선을 지운다. 양말모양으로 자른 것은 남겨두어야 한다.

저장하기 - 캔버스에 그린 그림을 파일로 다운로드한다.

 

HTML

캔버스 아래 버튼을 만들고, 적당한 id를 부여한다.

<canvas id="canvas"></canvas>
<div>
    <button id="eraserBtn">지우개</button>
    <button id="resetBtn">전체지우기</button>
    <button id="pairBtn">두짝그리기</button>
    <button id="saveBtn">저장하기</button>
</div>

 

Javascript

지우개 버튼

// 지우개 버튼
eraserBtn.addEventListener("click", () => ctx.strokeStyle = "white");

지우개버튼은 클릭했을 때 선의 색만 바꿔주는 것으로 쉽게 만들 수 있었다.

화살표 함수를 사용했는데, ("click", ctx.strokeStyle = "white");와 같이 화살표함수를 사용하지 않으면 처음 페이지를 열며 이벤트와 상관없이 코드를 한 줄 씩 읽어나갈 때 실행된다. 원하는 방법으로 사용하려면 화살표함수를 사용해야 한다.

클릭 이벤트와 직접적인 상관이 있는 코드가 아니라서 e => 처럼 이벤트객체를 넘기지 않고 () => 를 사용했다.

 

전체 지우기 버튼

// 전체 지우기 버튼
resetBtn.addEventListener("click", () => ctx.clearRect(0, 0, canvas.width, canvas.height));

clearRect(x, y, width, height) 는 (x, y) 위치부터 넓이 width, 높이 height만큼 크기의 사각형 면적을 지워준다.

 

저장하기 버튼

저장하기 버튼을 누르면 실행될 함수를 만든다.

 

handleSaveBtn에서 해야할 일은 다음과 같다.

1. 캔버스에서 이미지 데이터를 가져온다

2. 파일 다운로드를 위한 링크를 만든다.

3. 링크를 클릭한다(코드를 통해)

 

// 저장 버튼
saveBtn.addEventListener("click", handleSaveBtn);
 
function handleSaveBtn() {
    const image = canvas.toDataURL();
    const link = document.createElement("a");
    link.href = image;
    link.download = "MyDesignSocks";
    link.click();
}

canvas는 .toDataURL();이라는 메소드로 데이터를 가져올 수 있다.

canvas.toDataURL(type, encoderOptions);
type	이미지 형직 지정 기본값은 image/png
encoderOptions	이미지 포맷 압축 설정, 0과 1 사이의 값 기본값은 0.92

 

image를 만든 후 console.log(image)로 확인해보면 매우 긴 문자열이 나온다.

문자열로 캔버스의 그림을 표현하는 것이다.

다운받기 위해서 새로운 link를 만들고, href로 경로를 image로 설정한다.

link.download 를 설정하면 다운로드 받을 파일의 이름을 설정할 수 있다.

마지막으로 link.click();으로 클릭 이벤트를 생성해서 다운로드 링크를 클릭한 것으로 만든다.

다운로드 받은 파일을 확인해보면 내가 캔버스에 그린 그림과 같은 그림이 저장됐음을 알 수 있다.

 

* 파일로 저장할 때의 유의사항

canvas의 배경색을 지정하지 않으면 png로 저장했을 때 그리지 않은 곳은 투명한 색으로 저장된다.

페이지를 처음 실행할 때, 캔버스를 초기화했을 때 아래 코드로 배경색을 흰색으로 칠해주면 된다.

ctx.fillStyle = "white"
ctx.fillRect(0, 0, canvas.width, canvas.height);

 

 

참고한 페이지

https://velog.io/@ywoosang/addEventListener-%EC%BD%9C%EB%B0%B1%ED%95%A8%EC%88%98-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

addEventListener 콜백함수 제대로 이해하기

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect

CanvasRenderingContext2D.clearRect() - Web APIs | MDN

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

HTMLCanvasElement.toDataURL() - Web APIs | MDN

https://heimish77.tistory.com/95

[Vanilla-JS] 7. Saving the Image