Heim > Artikel > Web-Frontend > Wie speichere ich HTML Canvas als Bild mit canvas.toDataURL()?
Wie speichere ich HTML Canvas als Bild mit canvas.toDataURL()?
- 王林nach vorne
- 2023-08-28 20:41:131273Durchsuche
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('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!
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：So erlauben Sie das Hochladen mehrerer Dateien im HTML-FormatNächster Artikel：So erlauben Sie das Hochladen mehrerer Dateien im HTML-Format