Computer >> Máy Tính >  >> Lập trình >> HTML

Làm cách nào để lưu HTML Canvas dưới dạng Hình ảnh với canvas.toDataURL ()?


Sử dụng phương thức toDataURL () để lấy URL dữ liệu hình ảnh của canvas. Nó chuyển đổi bản vẽ (canvas) thành URL PNG được mã hóa a64 bit.

Ví dụ

Bạn có thể thử chạy đoạn mã sau để lưu canvas dưới dạng hình ảnh -

<!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>