Verwenden Sie die Methode toDataURL(), um die Bilddaten-URL der Leinwand abzurufen. Es konvertiert die Zeichnung (Leinwand) in eine 64-Bit-codierte PNG-URL.
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('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>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!
himmelblaucmyk
Verwendung beliebiger Zeichen durch reguläre Ausdrücke
So erstellen Sie einen Blog
Einführung in das Dex-Konzept der digitalen Währung
Die Rolle des Füllattributs in CSS
Was sind die Python-Frameworks für künstliche Intelligenz?
So überprüfen Sie die Mac-Adresse
Verwendung von strncpy
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
