Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

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('newCanvas');
         var ctx = canvas.getContext('2d');
         // 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 ='#F1F1F1';
         ctx.fill();
         ctx.stroke();
         var dataURL =canvas.toDataURL();
      </script>
   </body>
</html>