Upload d'un fichier image modifié

Bonjour à tous et merci d'avance pour vos lumières.

Le contexte :
Il s'agit d'un site de recettes de cuisine dans lequel les membres peuvent insérer des recettes accompagnées de photos.
Le PHP de base ne me pose aucun souci, traiter un formulaire avec des input de type "file" est un grand classique.
Je propose de plus en JavaScript, après avoir choisi une photo,
1. de la visualiser dans un élément HTML "img". Là encore, aucun souci, tout se passe bien.
2. de la recadrer. Cela se passe dans un canvas inséré dans une lightbox et fonctionne parfaitement. Dès que l'utilisateur a terminé, il clique sur un bouton de la lightbox, celle-ci disparaît et la photo recadrée vient remplacer la photo originale dans l'élément "img" correspondant. C'est l'upload de la photo recadrée qui me pose problème.

Fonctionnement :
Pour récupérer la photo recadrée, je me sers d'un second canvas invisible (display:none) dans lequel je crée un nouvel élément grâce à getContext('2d') et où je redessine l'image avec la fonction drawImage() puis je l'affiche dans l'élément "img" en lui donnant comme source la valeur obtenue par la fonction toDataURL().

Mais l'upload de cette source me conduit systématiquement à une erreur, voici le code de cette fonction que j'utilise certainement mal :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

function uploadFile(nomInpFile, imgSrc) { var xhr = new XMLHttpRequest(), formData = new FormData();   formData.append(nomInpFile, imgSrc); xhr.open('POST', urlDest, true); xhr.onload = function(){ //alert(nomInpFile+' téléchargé dans '+urlDest); handleComplete(imgSrc.size); }; xhr.onerror = function(){ alert(this.responseText); handleComplete(imgSrc.size); }; xhr.upload.onprogress = function(event){ handleProgress(event); } xhr.send(formData); }

---

Les arguments que j'utilise pour cette fonction :
- nomInpFile est le nom de l'input de type "file" du formulaire
- imgSrc est la chaîne source de l'élément "img" dont je parle plus haut (*)
Le contenu de la chaîne urlDest est le fichier PHP qui va traiter le formulaire avec son chemin complet ('https [...... ] fichier.php')
NB : le "alert" n'est là que pour la mise au point et il m'indique que l'upload s'est bien passé...
Mais quand je valide le formulaire (bouton de type "submit"), je n'ai pas de fichier chargé dans le input "file" ($_FILES[$nomInpFile]['tmp_name'] est vide).

Éclairez-moi SVP.

Bonsoir,

Citation:

---

Envoyé par PhilippeF75

- imgSrc est la chaîne source de l'élément "img" dont je parle plus haut (*)

---

Le point à revoir pourrait se situer ici.

Je n'ai plus trop canvas en tête, mais j'ai fait un test qui fonctionne en reprenant le code à l'identique.
Voici deux variantes qui permettent de faire arriver l'image dans $_FILES :

1)

Code:

---

canvas.toBlob(function(blob) {uploadFile("voiture",blob);},"image/jpeg",0.9);

---

Pour cette version, on peut ajouter un troisième paramètre dans le append : formData.append(nomInpFile, imgSrc, "voiture.jpg");

2)

Code:

---

canvas.toBlob(function(blob) {uploadFile("voiture",new File([blob],"voiture.jpg",{type:blob.type}));},"image/jpeg",0.9);

---

Dans les deux cas, on aura $_FILES['voiture']['name'] qui vaudra "voiture.jpg".


Je laisse également mon test complet :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

<image src="alpine.jpg"> <script> const urlDest="test.php"; function handleProgress() {} function handleComplete() {}   function uploadFile(nomInpFile, imgSrc) {         var     xhr = new XMLHttpRequest(),                 formData = new FormData();   //      formData.append(nomInpFile, imgSrc, "voiture.jpg"); //version 1         formData.append(nomInpFile, imgSrc); //version 2         xhr.open('POST', urlDest, true);         xhr.onload = function(){                 //alert(nomInpFile+' téléchargé dans '+urlDest);                 handleComplete(imgSrc.size);         };         xhr.onerror     = function(){                 alert(this.responseText);                 handleComplete(imgSrc.size);         };         xhr.upload.onprogress = function(event){                 handleProgress(event);         }         xhr.send(formData); }   document.getElementsByTagName("img")[0].addEventListener("load",function tutu() {         this.removeEventListener("load",tutu);         const canvas=document.createElement("canvas");         canvas.setAttribute('width',this.width);         canvas.setAttribute('height',this.height);         canvas.getContext("2d").drawImage(this,0,0); //      canvas.toBlob(function(blob) {uploadFile("voiture",blob);},"image/jpeg",0.9); //version 1         canvas.toBlob(function(blob) {uploadFile("voiture",new File([blob],"voiture.jpg",{type:blob.type}));},"image/jpeg",0.9); //version 2 }); </script>

---

test.php

Code:

---

<?php move_uploaded_file($_FILES['voiture']['tmp_name'],$_FILES['voiture']['name']);?>

---

Je ne dis pas que c'est la meilleure méthode, j'ai fait tout ça un peu de mémoire et en reprenant une partie d'un code que j'avais déjà mis sur le forum.

Bonsoir et merci Loralina pour ces pistes que je vais explorer rapidement.

Voilà qui est fait. Ca marche super bien ! J'ai utilisé la version 2 pour des raisons pratiques.
Merci à toi, tu me sors d'un joli pétrin.
:merci: