Comment puis-je réparer l'orientation (télécharger l'image) avant d'enregistrer dans le dossier (Javascript)?

J'essaie cette référence: https://github.com/blueimp/JavaScript-Load-Image

J'essaie comme ceci: https://jsfiddle.net/oscar11/gazo3jc8/

Mon code javascript comme ceci:

$(function () { var result = $('#result') var currentFile function updateResults (img, data) { var content if (!(img.src || img instanceof HTMLCanvasElement)) { content = $('<span>Loading image file failed</span>') } else { content = $('<a target="_blank">').append(img) .attr('download', currentFile.name) .attr('href', img.src || img.toDataURL()) var form = new FormData(); form.append('file', currentFile); $.ajax({ url:'response_upload.php', type:'POST', data:form, processData: false, contentType: false, success: function (response) { console.log(response); }, error: function () { console.log(error) }, }); } result.children().replaceWith(content) } function displayImage (file, options) { currentFile = file if (!loadImage( file, updateResults, options )) { result.children().replaceWith( $('<span>' + 'Your browser does not support the URL or FileReader API.' + '</span>') ) } } function dropChangeHandler (e) { e.preventDefault() e = e.originalEvent var target = e.dataTransfer || e.target var file = target && target.files && target.files[0] var options = { maxWidth: result.width(), canvas: true, pixelRatio: window.devicePixelRatio, downsamplingRatio: 0.5, orientation: true } if (!file) { return } displayImage(file, options) } // Hide URL/FileReader API requirement message in capable browsers: if (window.createObjectURL || window.URL || window.webkitURL || window.FileReader) { result.children().hide() } $('#file-input').on('change', dropChangeHandler) })

Si j'ai téléchargé l'image, l'image enregistrée dans le dossier n'utilise toujours pas l'image qui est dans son ensemble d'orientation. Je souhaite que lorsque je télécharge une image, l'image stockée dans le dossier est l'image qui a été définie son orientation

Il semble que le currentFile envoyé via ajax est le fichier currentFF non modifié. Comment puis-je obtenir le currentFile modifié?

Après quelques recherches, j'ai trouvé la solution grâce à ce superbe plugin https://github.com/blueimp/JavaScript-Canvas-to-Blob . ( Canvas-to-blob.js )

Ce plugin convertira votre canevas en un serveur Blob directement le verrait comme s'il s'agissait d'un fichier réel et obtiendrait le nouveau fichier (modifié) dans votre tableau $ _FILES . Tout ce dont vous avez besoin est d' toBlob sur l'objet canvas ( img ). Après cela, vous obtiendrez votre blob que vous pouvez envoyer à FormData. Vous trouverez ci-dessous votre fonction updateResults() mise à jour

 function updateResults (img, data) { var content if (!(img.src || img instanceof HTMLCanvasElement)) { content = $('<span>Loading image file failed</span>') } else { content = $('<a target="_blank">').append(img) .attr('download', currentFile.name) .attr('href', img.src || img.toDataURL()) img.toBlob( function (blob) { var form = new FormData(); form.append('file', blob, currentFile.name); $.ajax({ url:'response_upload.php', type:'POST', data:form, processData: false, contentType: false, success: function (response) { console.log(response); }, error: function () { console.log(error) }, }); },'image/jpeg' ); result.children().replaceWith(content); } }

Vous souhaitez modifier certaines choses sur l'image (dimensions, roataion, etc.) et la télécharger sur le serveur, mais le problème ici est que le plugin ImageLoad donnera l'image modifiée en tant que canvas signifie qu'elle ne modifiera pas le fichier d'origine sélectionné dans <input type="file" id="file-input"> . Puisque vous envoyez l'objet de saisie de fichier dans form.append('file', currentFile); Votre fichier modifié ne sera pas envoyé mais juste l'original

Comment réparer?

Ceci est particulièrement difficile, vous (ou un plugin) ne pouvez pas modifier quoi que ce soit sur <input type="file" id="file-input"> raison des restrictions du navigateur, vous ne pouvez pas envoyer de toile directement au serveur, donc la seule façon (utilisée et fonctionne bien ) Est d'envoyer l'URI de données de l'image en tant que texte régulier, puis de le décoder sur le serveur, l'écrire à un fichier. Vous pouvez également envoyer le nom de fichier d'origine car un URI de données est un contenu pur et ne tient pas nom de fichier

Changement

  form.append('file', currentFile);

  form.append('file', img.toDataURL() ); // data:image/png;base64,iVBO ... form.append('file_name', currentFile.name ); // filename

PHP

  $img_data=substr( $_POST['file'] , strpos( $_POST['file'] , "," )+1); //removes preamble ( like data:image/png;base64,) $img_name=$_POST['file_name']; $decodedData=base64_decode($img_data); $fp = fopen( $img_name , 'wb' ); fwrite($fp, $decodedData); fclose($fp );

Bonne chance!