canvas.toDataURL()의 이미지 저장 문제 해결

canvas.toDataURL()을 활용하여 캔버스를 이미지로 저장하려고 할 때 , 상황에 접근하는 방법은 다음과 같습니다.

문제 및 해결 방법

문제:

다음 캔버스 이미지를 저장하는 코드이지만 작동하지 않습니다.

// Canvas named "canvasSignature"

JavaScript:

function putImage() {
  var canvas1 = document.getElementById("canvasSignature");
  if (canvas1.getContext) {
    var ctx = canvas1.getContext("2d");
    var myImage = canvas1.toDataURL("image/png");
  }
  var imageElement = document.getElementById("MyPix");
  imageElement.src = myImage;
}

HTML5:


  Save as Image

해결책:

이미지를 바이너리 스트림으로 변환하는 단계가 코드에 없습니다. 코드를 다음과 같이 수정합니다.

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

window.location.href = image; // Save locally

코드는 이미지를 바이너리 스트림으로 변환하고 파일로 처리하여 이미지를 로컬에 저장할 수 있습니다.