HTML5에 캔버스를 저장하는 방법은 무엇입니까? HTML5 캔버스 저장 방법

이 글의 내용은 HTML5에서 캔버스를 저장하는 방법에 관한 것입니다. HTML5 캔버스 저장 방법에는 특정 참고 가치가 있습니다. 도움이 필요한 친구가 참고할 수 있기를 바랍니다.

캔버스에 멋진 그래픽을 그리는 것은 어렵습니다. 저장해야 합니다. 하지만 안타깝게도 캔버스에 있는 이러한 그래픽 자체는 실제 사진이 아니며 직접 저장할 수 없습니다. 다행히 Canvas API는 캔버스의 그래픽을 그림으로 변환할 수 있는 toDataURL() 메서드를 제공합니다.

기본적으로 toDataURL() 메서드는 그래픽을 base64 인코딩 형식의 png로 변환한 다음 데이터 URL 데이터를 반환합니다. MIME 유형 매개변수를 toDataURL()에 전달하여 캔버스를 다른 형식의 이미지로 변환할 수 있습니다.

데이터 URL 데이터가 있으면 <img> 요소에 데이터를 직접 입력하거나 브라우저에서 직접 다운로드할 수 있습니다. 다음은 toDataURL() 메서드를 사용하여 전체 캔버스를 그림으로 저장하는 방법을 보여주는 예입니다.

HTML 코드는 다음과 같습니다.

<button onclick=toDataURL("image/png")>显示为png图片</button>
<button onclick=toDataURL("image/jpeg")>显示为jpg图片</button>
<canvas id="canvas" width="200" height="200"></canvas>
<img id="image"/>

Javascript 코드는 다음과 같습니다.

function toDataURL(mime) {
   var canvas = document.getElementById("canvas");
   var image = document.getElementById("image");
   image.src = canvas.toDataURL(mime);
}

위 코드에서 사용자가 버튼을 클릭하면 " png 이미지로 표시" 또는 ""jpg 이미지로 표시"되면 toDataURL() 메서드가 호출되어 캔버스의 콘텐츠에서 이미지를 생성하고 사용자가 다운로드할 수 있도록 img 태그에 입력합니다.

1. toDataURL() 메서드는 캔버스 컨텍스트 개체의 메서드가 아닌 캔버스 요소 자체의 메서드입니다.

2. toDataURL() 메서드로 이미지를 저장하는 기본 형식은 "image/png"이며, 브라우저는 다른 형식을 잘 지원하지 않습니다. 예를 들어, Google Chrome 브라우저 버전 41.0.2272.118은 "image/jpeg" 형식도 지원하지만 "image/gif" 형식은 지원하지 않습니다.

2. 최신 브라우저는 이미 캔버스를 마우스 오른쪽 버튼으로 클릭하고 캔버스를 이미지로 저장하는 기능을 지원하지만 기본 "image/png" 형식으로 저장됩니다. 물론 프로그래밍 방식으로 toDataURL() 메서드를 호출하고 MIME 유형 매개변수를 전달하고 이를 다른 형식으로 저장할 수 있습니다.

위는 HTML5에서 캔버스를 저장하는 방법인가요? HTML5 캔버스 저장 방법에 대한 전체 소개 Html5 비디오 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.

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