로 생성될 수 있습니다."> HTML5에서 캔버스 데이터를 파일로 저장하는 방법은 무엇입니까?-HTML 튜토리얼-php.cn

HTML5에서 캔버스 데이터를 파일로 저장하는 방법은 무엇입니까?

WBOY
풀어 주다: 2023-09-08 11:57:02
앞으로
841명이 탐색했습니다.

HTML5에서 캔버스 데이터를 파일로 저장하는 방법은 무엇입니까?

캔버스는 HTML 페이지의 직사각형 영역일 뿐입니다. JavaScript의 도움으로 이 직사각형 영역(캔버스)에 그래픽을 그릴 수 있습니다.

캔버스는 HTML5에서 -

로그인 후 복사

로 생성할 수 있습니다. 이렇게 하면 canvas1, 너비=200, 높이=100이라는 빈 캔버스가 생성됩니다.

그래프를 그리려면 JavaScript -

var canvas = document.getElementById("Canvas1"); var ctx1 = canvas.getContext("2d"); ctx1.moveTo(0,0); ctx1.lineTo(300,200); ctx1.stroke(); // This method actually draw graphics as per context object
로그인 후 복사
를 사용합니다.

이 그래프를 저장하려면 img.png 또는 img.jpg와 같은 데이터 URL로 저장해야 합니다.

이를 위해 -

var imgurl= canvas.toDataURL( ) ; / / This method saves graphics in png document.getElementById(‘cimg’).src = imgurl; // This will set img src to dataurl(png) so that it can be saved as image.
로그인 후 복사

이렇게 작성합니다. , 캔버스 데이터를 HTML5 파일에 저장할 수 있습니다.

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

관련 라벨:
원천:tutorialspoint.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!