내 canvas.toDataURL()이 내 이미지를 저장하지 않는 이유는 무엇입니까?

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:

<div id="createPNGButton">
  <button onclick="putImage()">Save as Image</button>
</div>

해결 방법:

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

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

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

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

위 내용은 내 canvas.toDataURL()이 내 이미지를 저장하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!