JavaScript 입문 : Canvas 이론 정리 - 그림판 만들기 (이미지 적용 및 이미지 저장)

그림판을 사용한다는 것은 기본적으로 나만의 디자인을 만들수 있다는 것이고 해당 이미지를 저장하는 기능을 담아야 합니다. 따라서 만들어진 캔버스 그림판 기본형태에 이미지를 적용하는 방법과 별도로 그려진 이미지를 저장하는 기능을 탑재해 보도록 하겠습니다. 

 

본 내용은 '1분코딩의 HTML5 Canvas 라이브 강좌'를 기본으로 공부하고 있습니다. 

 

▒ 이미지 적용하기 

 

1. 이미지 버튼 만들고 그림판 적용

 

같은 방식으로 이미지 버튼을 하나 만들겠습니다. 사용할 이미지는 기존 코끼리 이미지를 활용하도록 하겠습니다. 

 

 

 

상기 그림판을 보면 컬러버튼 옆에 꼬끼리 이미지가 보입니다. 

 

2. 컬러와 이미지 구분 

 

그림판에 컬러만 있다면 data-color로 event.target을 잡을수 있으나 이제는 컬러와 이미지를 구분해야 합니다. 이 구분이 변수에서 구분을 시켜주어야 하는데 CSS의 데이터 속성으로 구분이 가능합니다. data-type을 하나 더 적용시켜 줍니다. 

 

 

이제 컬러와 이미지를 구분하는 변수를 만들고 그려지는 이미지를 연결 시킵니다.

 

 

컬러와 이미지 구분이 잘 되었는지 btnControl 함수에서 역시 event.target을 콘솔에서 확인해 봅니다. 

 

 

 

상기 콘솔에서 컬러버튼을 누르면 data-type 속성에 의해 'color'로 나오고 코끼리를 누르면 'image'로 나오는 것을 확인할 수 있습니다. 역쉬 console.log(  ) 대신 만들어 놓은 change 변수를 적용합니다. 

 

 

3. 상황별 그리기 

 

마우스로 그리기를 할 때 버튼을 누르는 색 또는 이미지를 인식하고 캔버스에 그릴수 있도록 만들어 줍니다. 상황별이기 때문에 if문이나 switch문으로 만들어 봅니다. 저는 if문을 적용해 보겠습니다. 

 

 

이제는 캔버스위 자유롭게 그릴 수 있네요. 

 

 

▒ 이미지 저장하기 

 

현재까지 만들어진 그림을 png파일로 저장하는 기능을 만들어 보겠습니다. 역시 저장 버튼을 만들고 저장되는 공간인 <div>태그를 만들어 그 곳으로 append(  ) 시키면 됩니다. 

 

① 기본구조 만들기

 

저장 버튼을 생성하고 자바스크립트를 통하여 활성화 시킨 후 클릭이벤트를 적용해 줍니다. 

 

 

 

 

 

② 저장 위치 만들고 위치 활성화

 

저장위치에 대한 <div> 태그를 만들고 자바스크립트에서 활성화 시킵니다. 

 

 

 

 

③ 저장 메소드 toDataURL(  )

 

toDataURL(  ) 메소드를 통하여 지정된 폴더에 지정하고자 하는 확장자로 그려진 이미지를 저장할 수 있습니다. 이렇게 그려진 이미지 소스로부터 받아와 new 생성자를 통하여 이미지를 만들고 저장할 위치의 <div>태그에 반영할 수 있습니다. 

 

 

캔버스에서 확인해 보면 다음 그림에 대해 저장 버튼을 클릭해 봅니다. 

 

 

아래 그림과 같이 지정된 위치에 그림이 생깁니다. 이를 우측클릭으로 저장하면 원하는 이름으로 저장할 수 있습니다.