Я пробую эту ссылку: https://github.com/blueimp/JavaScript-Load-Image
Я пробую вот так: https://jsfiddle.net/oscar11/gazo3jc8/
Мой код javascript:
$(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) }) Если я загрузил изображение, изображение, сохраненное в папке, по-прежнему не использует изображение, установленное в его ориентации. Я хочу, чтобы при загрузке изображения изображение, хранящееся в папке, было изображением, которое было настроено на его ориентацию
Кажется, что currentFile отправленный через ajax, является неизмененным currentfFile. Как получить измененный currentFile ?
После некоторого небольшого исследования я нашел решение благодаря этому великолепному плагину 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 );
Удачи!