[VanillaJS] Canvas를 이용해서 그림판 만들기-그림 이미지로 저장

2023.01.10 - [Front-End/VanillaJs] - [VanillaJS] 1-Canvas를 이용해서 그림판 만들어보기-지우기

[VanillaJS] 1-Canvas를 이용해서 그림판 만들어보기-지우기

이 편에 이어서 이젠 그린 그림을 이미지로 저장하는 방법을 알아보자

 

방법은 쉽다.

먼저 a태그를 이용한다.

그리고 JS에 a태그를 가지고 온 후 a태그의 href 값에 다음과 같은 함수를 입력한다.

downloadEl.href = this.canvasEl.toDataURL('image/jpeg', 1); //데이터 형식, 품질

캔버스의 toDataURL함수를 이용해 데이터의 형식과 품질을 지정해 결과값(이미지의 주소값이 나옴)을 a태그에 넣는다.

downloadEl.download = 'example.jpeg';

그리고 a태그에 download 속성에 저장할 파일의 파일 이름을 기입하면 해당 a태그 클릭 시 당시 그림이 저장된다.

 

쉽쥬?

 

** 추가로 미니맵 같은 기능을 추가하고 싶을 때 빈 이미지 태그 src에 toDataURL을 사용하면 미니맵 기능을 사용할 수 있다.

 

**또한 뒤돌아가기 기능을 사용하고 싶을 땐 그릴 때마다 toDataURL값을 배열에 저장했다가 뒤로가기 버튼을 눌렀을 때 pop하며 아래와 같은 로직을 사용하면 된다.

let prevUrl = this.imgRecord.pop();
    let prevImg = new Image();
    prevImg.onload = () => {
      this.context.clearRect(0, 0, this.canvasEl.width, this.canvasEl.height); //불러오기 전 초기화를 함
      this.context.drawImage(
        prevImg,
        0,
        0,
        this.canvasEl.width,
        this.canvasEl.height,
        0,
        0,
        this.canvasEl.width,
        this.canvasEl.height,
      ); //이미지, 기준점, 그릴 크기, 바탕이 되는 기준점, 바탕 크기
    }; //이미지가 확실히 로드되었을 때 사용
    prevImg.src = prevUrl;