home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

วิธีบันทึก HTML Canvas เป็นรูปภาพด้วย canvas.toDataURL ()

ใช้วิธี toDataURL() เพื่อรับ URL ข้อมูลรูปภาพของแคนวาส มันแปลงภาพวาด (ผ้าใบ) เป็น URL PNG ที่เข้ารหัส a64 บิต

ตัวอย่าง

คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อบันทึกผืนผ้าใบเป็นรูปภาพ -

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