canvas.toDataURL()을 사용하여 HTML 캔버스를 이미지로 저장하는 방법은 무엇입니까?-HTML 튜토리얼-php.cn

예

집

웹 프론트엔드

HTML 튜토리얼

canvas.toDataURL()을 사용하여 HTML 캔버스를 이미지로 저장하는 방법은 무엇입니까?

王林

Aug 28, 2023 pm 08:41 PM

如何使用canvas.toDataURL()将HTML Canvas保存为图像？

toDataURL() 메소드를 사용하여 캔버스의 이미지 데이터 URL을 가져옵니다. 그림(캔버스)을 64비트로 인코딩된 PNG URL로 변환합니다.

예

다음 코드를 실행하여 캔버스를 이미지로 저장할 수 있습니다 −

<!DOCTYPE HTML>
<html>
   <head>
   </head>
   <body>
      <canvasid = "newCanvas" width = "450" height = "300"></canvas>
      <script>
         var canvas = document.getElementById(&#39;newCanvas&#39;);
         var ctx = canvas.getContext(&#39;2d&#39;);
         // draw any shape
         ctx.beginPath();
         ctx.moveTo(120, 50);
         ctx.bezierCurveTo(130,100, 130, 250, 330, 150);
         ctx.bezierCurveTo(350,180, 320, 180, 240, 150);
         ctx.bezierCurveTo(320,150, 420, 120, 390, 100);
         ctx.bezierCurveTo(130,40, 370, 30, 240, 50);
         ctx.bezierCurveTo(220,7, 350, 20, 150, 50);
         ctx.bezierCurveTo(250,5, 150, 20, 170, 80);
         ctx.closePath();
         ctx.lineWidth = 3;
         ctx.fillStyle =&#39;#F1F1F1&#39;;
         ctx.fill();
         ctx.stroke();
         var dataURL =canvas.toDataURL();
      </script>
   </body>
</html>

로그인 후 복사

위 내용은 canvas.toDataURL()을 사용하여 HTML 캔버스를 이미지로 저장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.