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

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

캔버스는 HTML5에서 -

<canvas id = &rdquo;canvas1&rdquo; width = &rdquo;250&rdquo; height = &rdquo;150&rdquo;></canvas>                                 

로 생성할 수 있습니다. 이렇게 하면 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!