HTML 캔버스를 PNG 이미지로 저장하려면 어떻게 해야 합니까?

HTML 캔버스 출력을 다양한 이미지 형식으로 캡처

질문:

HTML 캔버스의 콘텐츠를 다음과 같이 캡처하거나 인쇄할 수 있습니까? 이미지 또는 PDF? 구체적으로 어떻게 캔버스에서 이미지를 생성하고 PNG로 저장할 수 있습니까?

답변:

HTML5의 고급 기능을 사용하여 캔버스 출력을 캡처하고 이미지로 저장합니다. 간단한 프로세스가 되었습니다.

const canvas = document.getElementById('mycanvas');
const img = canvas.toDataURL('image/png');

원하는 이미지 데이터가 img 변수에 저장되면 사용할 수 있습니다. 다양한 방법으로:

• 새 이미지 생성:

document.getElementById('existing-image-id').src = img;

• HTML로 직접 표시:

document.write('<img src="' + img + '" />');

이 스크립트를 사용하면 캡처하고 캔버스 출력을 PNG 이미지로 저장하여 향후 사용이나 배포에 편리한 방법을 제공합니다.

위 내용은 HTML 캔버스를 PNG 이미지로 저장하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!