HTML 캔버스를 캡처하여 이미지(PNG, JPG, GIF) 또는 PDF로 저장하려면 어떻게 해야 합니까?

HTML 캔버스를 이미지 또는 PDF로 캡처

질문:

캡처할 수 있나요? HTML 캔버스에 표시된 콘텐츠를 이미지(GIF, JPG, PNG) 또는 PDF로 내보내나요? 구체적으로 캔버스 그래픽에서 PNG 이미지를 생성하려면 어떻게 해야 합니까?

답변:

예, HTML 캔버스의 콘텐츠를 캡처하여 내보낼 수 있습니다. 이미지나 PDF로. 캔버스에서 PNG 이미지를 생성하려면:

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

이렇게 하면 PNG 데이터가 포함된 문자열이 생성됩니다. 그런 다음 이 데이터를 사용하여 새 이미지 요소를 생성하거나 파일에 쓸 수 있습니다.

새 이미지 요소 생성

새 이미지 요소를 생성하고 PNG 이미지를 표시하려면 다음 코드를 사용하세요.

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

이렇게 하면 이미지 요소의 src 속성이 ID로 설정됩니다. 'existing-image-id'를 PNG 데이터에 추가하여 캔버스 콘텐츠를 효과적으로 이미지로 표시합니다.

파일에 쓰기

PNG 데이터를 파일에 다음 코드를 사용하세요:

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

이렇게 하면 이미지 데이터가 HTML 문서에 직접 기록됩니다. 그런 다음 문서를 원하는 확장명(예: .png)의 파일로 저장하여 캔버스 콘텐츠를 이미지로 저장할 수 있습니다.

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