HTML lädt Bilddaten auf den Server hoch und PHP empfängt und speichert das Bild.

Oftmals müssen wir die Bilddaten im Web oder die Bilder im Canvas auf dem Server speichern. HTML5 stellt bereits verfügbare Schnittstellen zur Verfügung.

Die toDataURL-Methode von Canvas kann die Canvas-Daten auf der Canvas in ein String-Format exportieren. Wir müssen den String nur noch einmal an den Server übertragen.

Was soll ich tun, wenn das Bild einen IMG-Tag hat?

Canvas bietet ganz einfach die Methode drawImage, mit der Sie img- oder andere Canvas-Daten auf Ihre eigene Leinwand zeichnen können.

Schauen wir uns als Nächstes den Client-Code an:

var cc = window.document.getElementById("egretCanvas");
var cc2 = document.createElement("canvas");
cc2.setAttribute("width", "320");
cc2.setAttribute("height", "514");
var ctx = cc2.getContext("2d");
ctx.drawImage(cc, 0, 0, 320, 514);

var imgdata: string = cc2["toDataURL"]();

Die exportierte Zeichenfolge enthält das Präfix „data:image/png;base64“, daher müssen wir dieses Präfix entfernen

imgdata = imgdata.substring(22); 

Dann übergeben wir die Zeichenfolge an den Server. Hier verwenden wir die PHP-Sprache, um die Daten zu empfangen und das Bild zu speichern.

$imgurl = str_replace(' ', '+', $_REQUEST['image']);

Ersetzen Sie zunächst die Leerzeichen in der Zeichenfolge durch „ “-Zeichen.

$savePath = "../images/123.png";
$image = base64_decode($image);
file_put_contents($savePath,$image);

Nachdem PHP die Daten erhalten hat, müssen diese mit Base64 dekodiert werden, bevor sie als Bild gespeichert werden können.

Das Obige stellt vor, wie HTML Bilddaten auf den Server hochlädt und PHP Bilder empfängt und speichert, einschließlich des Inhalts. Ich hoffe, dass es für Freunde hilfreich ist, die sich für PHP-Tutorials interessieren.