J'ai un canevas et récupère les données d'image avec l'aide de canvas.toDataURL('image/png')
.
Problème: <input type="file" />
veut que filepath soit value
au lieu de base64.
Question: Comment envoyer des données d'image base64 au serveur à l'aide de <input type="file" />
SANS les enregistrer sur le système de fichiers local?
Mes solutions de contournement: Entrée masquée <input type="file" />
essayée, mais le serveur requiert la propriété filename
Peut-être que c'est possible de surmonter cela avec XmlHttpRequest?
Créez simplement un élément d’entrée caché dans votre formulaire. (notez le type )
<input type="hidden" name="myHiddenField">
Associez vos données à la valeur de l'élément avant de les soumettre.
var imageData = canvas.toDataURL('image/png');
document.getElementsByName("myHiddenField")[0].setAttribute("value", imageData);
METTRE À JOUR
Si votre serveur exige que le paramètre "nom de fichier" soit présent dans les données soumises, incluez cette chaîne comme nom de l'élément input
.
<input type="hidden" name="filename"/>
Cela trompera le formulaire pour soumettre vos données avec le paramètre "nom de fichier" inclus.
Si vous souhaitez utiliser XMLHttpRequest
pour cela, voici un exemple:
//Prepare data to be sent
var imageData = canvas.toDataURL('image/png');
var params = "filename=" + imageData;
//Initiate the request
var httpRequest = new XMLHttpRequest();
httpRequest.open('POST', 'test.php', true);
//Send proper headers
httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
httpRequest.setRequestHeader("Content-length", params.length);
httpRequest.setRequestHeader("Connection", "close");
//Send your data
httpRequest.send(params);
Vous pouvez utiliser FileReader, voir des exemples ici: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications