Bagaimana untuk menyimpan Kanvas HTML sebagai imej menggunakan canvas.toDataURL()?-html tutorial-php.cn

Bagaimana untuk menyimpan Kanvas HTML sebagai imej menggunakan canvas.toDataURL()?

王林

Lepaskan： 2023-08-28 20:41:13

ke hadapan

1304 orang telah melayarinya

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

Gunakan kaedah toDataURL() untuk mendapatkan URL data imej kanvas. Ia menukar lukisan (kanvas) kepada URL PNG yang dikodkan 64-bit.

Contoh

Anda boleh cuba jalankan kod berikut untuk menyimpan kanvas sebagai imej −

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

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk menyimpan Kanvas HTML sebagai imej menggunakan canvas.toDataURL()?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!