Exportieren Sie HTML5-Canvas-Bilder und laden Sie Serverfunktionen hoch

Exportieren Sie HTML5-Canvas-Bilder und laden Sie sie auf den Server hoch

In neueren Projekten stoße ich oft auf die Notwendigkeit, Bilder auf Leinwand zu zeichnen, etwa bei Puzzles, Bildbearbeitung usw. Von Canvas verarbeitete Bilder müssen gespeichert werden.

Daher ist möglicherweise die folgende Methode genau das Richtige für Sie

1. Verwenden Sie die Methode toDataURL(), um das Canvas-Bild zu exportieren und die Base64-Daten abzurufen.

2. Kapseln Sie Base64-Daten in Blob-Objekte

3. Stellen Sie FormData zusammen

4.Ajax-Upload

Natürlich erfordert der Upload-Prozess die Mitarbeit der Serverseite, wie etwa die domänenübergreifende Festlegung von vereinbarten Feldern. . .

Eine einfache Demo:

 function handleSave () { //Bilddaten im Base64-Format exportieren var mycanvas = document.getElementById(mycanvas); var base64Data = mycanvas.toDataURL(image/jpeg, 1.0); //Blob-Objekt kapseln var blob = dataURItoBlob(base64Data); //Formulardaten zusammensetzen var fd = new FormData(); fd.append(fileData, blob); //fileData wird angepasst fd.append(fileName, 123jpg); //fileName wird angepasst, der Name wird je nach Anforderung zufällig generiert oder fest codiert //Ajax-Upload, die Form von Ajax ist beliebig und Beim Schreiben von JQ gibt es kein Problem // Es ist zu beachten, dass der Server so eingestellt werden muss, dass er domänenübergreifende Anforderungen zulässt. Die Art und Weise, wie Daten empfangen werden, unterscheidet sich nicht von der von <input type=file/> var xmlHttp = new XMLHttpRequest(); localStorage.token);//Anforderungsheader festlegen, optional xmlHttp.send(fd); //ajax callback xmlHttp.onreadystatechange = () => { //todo your code... }; (base64Data) { var byteString; (base64Data.split(',')[0].indexOf('base64') >= 0) byteString = atob(base64Data.split(',')[1]); else byteString = unescape(base64Data.split(' ,')[1]); var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0]; var ia = new Uint8Array(byteString.length); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); return new Blob([ia], {type: mimeString});};

 function b64ToUint8Array(b64Image) { var img = atob(b64Image.split(',')[1]); var img_buffer = []; while (i < img.length) { img_buffer.push(img. charCodeAt(i)); i++; } return new Uint8Array(img_buffer);}var b64Image = canvas.toDataURL('image/jpeg');var u8Image = b64ToUint8Array(b64Image);var formData = new FormData();formData.append(image, new Blob([ u8Image ], {type: image/jpg}) );var xhr = new XMLHttpRequest();xhr.open(POST, /api/upload, true);xhr.send(formData);

Mit der oben genannten Methode wird es über js im Front-End verarbeitet, und auf der Serverseite ist keine zusätzliche Verarbeitung erforderlich.

Ich denke, es ist die bequemste und direkteste Methode. Es gibt jedoch viele Antworten mit hohem Like und erfordert eine unterschiedliche Verarbeitung durch den Server, was nicht empfohlen wird.

Musste ein Base64-codiertes Canvas-Bild in Uint8Array Blob konvertieren.

Referenz: https://stackoverflow.com/questions/13198131/how-to-save-an-html5-canvas-as-an-image-on-a-server

Die oben beschriebene Funktion zum Exportieren von HTML5-Canvas-Bildern und zum Hochladen auf den Server wird Ihnen hoffentlich weiterhelfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!

Wenn Sie der Meinung sind, dass dieser Artikel für Sie hilfreich ist, können Sie ihn gerne erneut drucken. Bitte geben Sie die Quelle an. Vielen Dank!