HTML5에서 캔버스를 이미지로 저장하는 방법은 무엇입니까?

Canvas.toDataURL()을 사용하여 캔버스를 이미지로 저장

HTML5에서는 캔버스 요소에서 이미지를 만들고 조작할 수 있습니다. 캔버스를 이미지로 저장하려면 canvas.toDataURL() 메서드를 사용할 수 있습니다. 이 메서드는 지정된 이미지 형식으로 캔버스 콘텐츠의 base64 인코딩 문자열 표현을 반환합니다.

그러나 다음 코드를 사용하여 캔버스를 이미지로 저장하려고 하면 문제가 발생할 수 있습니다.

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;
}

이 코드는 base64로 인코딩된 문자열을 제대로 처리하지 못하기 때문에 실패합니다. 캔버스를 이미지로 저장하려면 다음과 같은 향상된 코드를 사용해야 합니다.

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

여기서 replacement() 메서드는 base64로 인코딩된 문자열을 옥텟 스트림으로 변환하는 데 사용됩니다. window.location.href 할당과 호환됩니다. 이제 이 코드는 캔버스를 로컬 이미지로 성공적으로 저장합니다.

위 내용은 HTML5에서 캔버스를 이미지로 저장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!