save img

 

캔버스에서 마우스 우클릭을 하면, 

두 가지를 볼 수 있는데, save img와 copy img이다. 

 

우리가 캔버스에서 한 작품들은 이미지 저장이 된다. 

 

무슨일이 일어난 거냐면, 

canvas는 pixel을 다루는 거니까 기본적으로 img를 만든다. 

그래서 다운로드와 save파트는 이미 내장되어있다. 

 

이미 canvas가 pixel을 다뤄서 img를 만들어주니까 우리가 할게 없다. 

 

여기에 버그가 있다는 것을 알게 되었는데, 

 

filling모드를 적용하지 않으면 배경이 투명색으로 이미지가 저장된다. 

 

즉, canvas에 배경색을 지정하지 않으면, 

실제 pixel manipulator canvas에 background를 설정하지 않아서이다. 

 

즉 우리는 배경색을 지정하지 않아도, 

canvas가 load 되자마자 설정되도록 초기화값을 설정해야한다. 

 

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

위와 같이 코드를 작성하면,

기본값으로 흰색배경이 지정될 것이다 .

 

---

 

그런데 만약, 

위와 같이 오른쪽 마우스버튼을 눌러을 때 이런 저장, 복사 기능들이 나오지 않게 하고 싶다면, 

(이를 contextmenu 라고 한다. )

아래와 같이 코드를 작성하자. 

 

 

function handleCM(event) {
  event.preventDefault();
}

if (canvas) {
  canvas.addEventListener("mousemove", noMouseMove);
  canvas.addEventListener("mousedown", startPainting);
  canvas.addEventListener("mouseup", stopPainting);
  canvas.addEventListener("mouseleave", stopPainting);
  canvas.addEventListener("click", handleCanvasClick);
  canvas.addEventListener("contextmenu", handleCM); //추가된 코드
}

 

event.preventDefault();를 이용한다. 참 쉽죠잉~~? 🍞

 

그럼 우클릭을 해도 contextmenu가 나타나지 않는다. 

 

왜냐면, 우리는 사람들이 save버튼을 이용해서 이미지를 저장하길 원하기 때문이다:)

---

자 그럼이제

save버튼에 알맞는 이벤트 리스너를 작성해보자.

 

우리가 원하는건, 여기에 있는, 

내가 그린 것들을 다 넣고, img안에 이것들을 담아내는 것이다. 

 

그러면 사용자가 이걸 자동으로 저장할 수 있게 만들 수 있다. 

 

먼저 필요한 것은, 

 

canvas의 데이터를 img처럼 얻는 것이다. 

 

이게 첫번째 파트이다. 

 

canvas todata url 을 구글링 해보자. 

 

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

HTMLCanvasElement.toDataURL()

위와 같이 검색결과가 나온다. 

 

"HTMLCanvasElement.toDataURL()메소드는 

(기본적으로 PNG로 설정된) type parameter에 의해 

지정된 포맷의 이미지 표현을 포함한 data URI를 반환함. "

 

이건 변경할 수 있다. PNG가 될 수 있고, jpeg도 될 수 있고 img format이라면 뭐든지.

 

이 메소드를 활용해보자.

 

const saveBtn = document.getElementById("jsSave"); // save버튼가져오기.

function handleSaveClick(event) {
  const image = canvas.toDataURL("image/jpeg");
  console.log(image); //콘솔을 이용해서 위 함수가 잘 동작하는지 확인.
}

if (saveBtn) {
  saveBtn.addEventListener("click", handleSaveClick);
}

 

콘솔에 이미지 데이터가 잘 뜨는 것을 볼 수 있다. 

 

자, 우리는 이제 링크를 만들건데, 

존재하지 않는 링크 같은 것이다. 

 

아래와 같이 작성해보자.

 

function handleSaveClick(event) {
  const image = canvas.toDataURL("image/jpeg");
  const link = document.createElement("a"); //추가
  link.download = image;  //추가
  console.log(link);  //link가 잘 작동하는지 확인
}

 

download는 anchor("a") 태그의 attribute인데 

href대신 download를 써도 된다.

 

attribute는 browser에게 이 링크로 가는 대신, URL을 다운로드 하라고 지시하는 것이다. 

우리는 이걸 원하는 것이다. 

 

save버튼을 눌러보면 

아래와 같이 콘솔에 링크가 출력되는데 이 링크는 img를 갖고 있다. 

 

이제 여기서 클릭을 가짜로 만들면 된다. 

 

근데 뭔가 오류가 있다. 

 

이유는 아래 예시와 같다. 

 

link.href = canvas.toDataURL();  // href는 img가 되어야 하고,

link.download = "mypainting.png"; // download는 그 이름을 가져가야 한다. 

 

즉 아래 코드와 같이 되어야 하는 것이다. 

 

function handleSaveClick(event) {
  const image = canvas.toDataURL("image/jpeg");
  const link = document.createElement("a");
  link.href = image;  // 수정 -url
  link.download = "PaintJS[🎨]";  // 수정 -파일 이름
  link.click();
}

 

오예!

 

 

 

이렇게 내가 그린 파일이 저장되엇당  🎆🎉🎊

 

보니까 jpeg 의 화질 퀄리티는 별루인것 같으니 png로 저장되도록 하는게 좋겠다. 

 

만약 초고화질을 원한다면 캔버스 크기를 바꾸어라. 지금 캔버스 크기는 700px이므로..