Javascript로 그림판 만들기 (자바스크립트로 그림판 만들기) - 008

소개 https://chobocho.tistory.com/2461396
실행하기 http://www.chobocho.com/javascript/painter.html
전체 소스코드 https://github.com/chobocho/painter

8.1 저장하기

painter.html에 save를 위한 버튼을 추가 합니다.

<div>
  <a id="saveImage" download="image.png">
      <INPUT type="button" value="Save" onClick="saveImage()" />
  </a>
</div>

그리고, painter.js에 saveImage()함수를 추가합니다.

function saveImage() {
  console.log("saveImage()");
  var imageName = document.getElementById("title").value;
  console.log(imageName.lenght);
  if (imageName.length == 0) {
    imageName = "image";
  }
  imageName += ".png";
  var savedImage = document.getElementById("saveImage");
  var image = document
    .getElementById("canvas")
    .toDataURL("image/png")
    .replace("image/png", "image/octet-stream");
  savedImage.setAttribute("download", imageName);
  savedImage.setAttribute("href", image);
}

여기 까지 소스코드는 아래 링크를 참고 하시면 됩니다.

https://github.com/chobocho/painter/commit/dceabd6f3ace4d39e21260d593dc55a2d15e47df