[4] 이미지 저장하는 버튼 만들기

 <button id="save_button">저장하기</button>

 

이렇게 버튼 요소를 만들어준 후, 

JS 로 버튼을 클릭했을 때의 이벤트 함수를 만들어준다.

const onSaveButtonClick = () => {
  const image = canvas.toDataURL('image/jpeg');
  const link = document.createElement('a');
  link.href = image;
  link.download = 'ProfileByDDOZZA';
  link.click();
  alert('save!');
};

 

canva.toDataUrl() 

: 이미지 표현을 포함하는 데이터 URL을 반환한다. 파일 형식을 지정할 수 있는데, 따로 지정하지 않으면 PNG 형식으로 내보내진다. 많은 경우에 image/jpeg 혹은 image/webp 형식도 지원된다. 원하는 타입이 있다면 괄호 안에 써주면 된다. 

<a>.href 에 이미지 생성해준 이미지 url 을 넣어주고, 

<a>.download 로 사용자에게 URL 을 저장할 지 물어본다. 값을 지정하면 파일 명이 된다. 

이미지가 저장된 모양

link 에 클릭 이벤트를 넣어준다. 

 

저장 알람을 넣어줬는데, 확인을 클릭해야해서 0.5. 초 뒤에 사라지게 만들어야겠다. 

 

 

잘 저장된다!

 

 

 

 

https://developer.mozilla.org/ko/docs/Web/HTML/Element/a#download_%ED%8A%B9%EC%84%B1%EC%9C%BC%EB%A1%9C_canvas%EB%A5%BC_png%EB%A1%9C_%EC%A0%80%EC%9E%A5%ED%95%98%EA%B8%B0

<a> - HTML: Hypertext Markup Language | MDN

https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/click

HTMLElement.click() - Web API | MDN