Wie speichere ich HTML Canvas als Bild mit canvas.toDataURL()?-HTML-Tutorial-php.cn

Wie speichere ich HTML Canvas als Bild mit canvas.toDataURL()?

王林

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

nach vorne

1280 Leute haben es durchsucht

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

Verwenden Sie die Methode toDataURL(), um die Bilddaten-URL der Leinwand abzurufen. Es konvertiert die Zeichnung (Leinwand) in eine 64-Bit-codierte PNG-URL.

Beispiel

Sie können versuchen, den folgenden Code auszuführen, um die Leinwand als Bild zu speichern –

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie speichere ich HTML Canvas als Bild mit canvas.toDataURL()?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!