Как исправить ориентацию (загрузить изображение) перед сохранением в папке (Javascript)?

После некоторого небольшого исследования я нашел решение благодаря этому великолепному плагину https://github.com/blueimp/JavaScript-Canvas-to-Blob . ( canvas-to-blob.js )

Этот плагин преобразует ваш холст в сервер Blob напрямую, увидит его, как если бы он был фактическим файлом и получит новый (измененный) файл в вашем массиве $ _FILES . Все, что вам нужно, это вызвать toBlob на объекте canvas ( img ). После этого вы получите свой blob, который вы затем можете отправить в FormData. Ниже приведена обновленная updateResults()

 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); } } 

Вы хотите изменить некоторые вещи об изображении (размеры, roataion и т. Д.) И загрузить его на сервер, но проблема заключается в том, что плагин ImageLoad предоставит модифицированное изображение в качестве canvas он не будет изменять исходный файл, выбранный в <input type="file" id="file-input"> . Поскольку вы отправляете объект ввода файла в form.append('file', currentFile); ваш измененный файл не будет отправлен, а только оригинал

Как исправить?

Это особенность, которую вы (или плагин) не можете изменить что-либо на <input type="file" id="file-input"> из-за ограничений браузера, вы не можете отправить canvas непосредственно на сервер, так что единственный способ (используется и отлично работает ) заключается в том, чтобы отправить URI данных изображения в виде обычного текста, а затем декодировать его на сервере, записать его в файл. Вы также можете отправить исходное имя файла, поскольку URI данных является чистым контентом и не выполняется имя файла

+ Изменить

  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 ); 

Удачи!