Exportez des images HTML5 Canvas et téléchargez des fonctions de serveur

Exportez les images HTML5 Canvas et téléchargez-les sur le serveur

Dans les projets récents, je rencontre souvent le besoin de dessiner des images sur toile, comme des puzzles, des retouches d'images, etc. Les images traitées par Canvas doivent impliquer une sauvegarde.

Par conséquent, la méthode suivante peut être ce dont vous avez besoin~

1. Utilisez la méthode toDataURL() pour exporter l'image du canevas et obtenir les données base64.

2. Encapsuler les données base64 dans des objets blob

3. Assembler FormData

4.téléchargement ajax

Bien entendu, le processus de téléchargement nécessite la coopération du côté serveur, comme la configuration de plusieurs domaines, tels que les champs convenus. . .

Une démo simple :

 function handleSave () { //Exporter les données d'image au format base64 var mycanvas = document.getElementById(mycanvas); var base64Data = mycanvas.toDataURL(image/jpeg, 1.0); //Encapsuler l'objet blob var blob = dataURItoBlob(base64Data); //Assembler formdata var fd = new FormData(); fd.append(fileData, blob); //fileData est personnalisé fd.append(fileName, 123jpg); //fileName est personnalisé, le nom est généré aléatoirement ou codé en dur, selon les exigences //ajax upload, la forme d'ajax est arbitraire et il n'y a aucun problème avec l'écriture de JQ //Il convient de noter que le serveur doit être configuré pour autoriser les requêtes inter-domaines. La manière de recevoir les données n'est pas différente du fichier téléchargé par <input type=file/>var xmlHttp = new XMLHttpRequest(); xmlHttp.open(POST, l'url avec laquelle vous avez envoyé la demande de téléchargement); localStorage.token);//Définir l'en-tête de la requête, défini selon les besoins, facultatif xmlHttp.send(fd); //rappel ajax xmlHttp.onreadystatechange = () => { //pour faire votre code... }; (base64Data) { var chaîne d'octets ; (base64Data.split(',')[0].indexOf('base64') >= 0) byteString = atob(base64Data.split(',')[1]); ,')(1]); var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0]; var ia = new Uint8Array(byteString.length); je < 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 = []; var i = 0; while (i < img.length) { img_buffer.push(img. charCodeAt(i)); i++; } renvoie un nouveau 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);

En utilisant la méthode ci-dessus, il est traité via js sur le front-end et aucun traitement supplémentaire n'est requis côté serveur.

Je pense que c'est la méthode la plus pratique et la plus directe. Cependant, il existe de nombreuses réponses de type élevé et nécessitent divers traitements par le serveur, ce qui n'est pas recommandé.

J'ai dû convertir l'image codée en Base64 en toile en Uint8Array Blob .

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

Ce qui précède est la fonction d'exportation d'images HTML5 Canvas et de téléchargement sur le serveur introduite par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !

Si vous pensez que cet article vous est utile, n'hésitez pas à le réimprimer, veuillez indiquer la source, merci !