如何在保存到文件夹（Javascript）之前修复方向（上传图像）？

我试试这个参考： 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 = $('Loading image file failed') } else { content = $('').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( $('' + 'Your browser does not support the URL or FileReader API.' + '') ) } } 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) }) 

如果我上传了图像，则保存在文件夹中的图像仍然不会使用其方向设置中的图像。 我想在上传图片时，存储在文件夹中的图像是已设置其方向的图像

似乎通过ajax发送的currentFile是未修改的currentfFile。 如何获得修改后的currentFile ？

Answer 1

经过一些研究，我找到了解决方案，感谢这个伟大的插件https://github.com/blueimp/JavaScript-Canvas-to-Blob 。 （ canvas-to-blob.js ）

这个插件会将你的canvas直接转换为Blob ，服务器会将它看作是一个实际的文件，并在你的$ _FILES数组中得到新的（修改过的）文件。 您只需要在canvas对象（ img ）上调用toBlob 。 之后你会获得你的blob，然后你可以在FormData中发送。 以下是您更新的updateResults()函数

 function updateResults (img, data) { var content if (!(img.src || img instanceof HTMLCanvasElement)) { content = $('Loading image file failed') } else { content = $('').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); } } 

Answer 2

你想改变一些关于图像的东西（尺寸，roataion等）并将其上传到服务器，但问题是ImageLoad插件会将修改后的图像作为canvas意味着它不会修改选择的原始文件 。 由于您在form.append('file', currentFile);中发送文件输入对象form.append('file', currentFile); 您的修改后的文件不会被发送但只是原始文件

怎么修？

这是特别困难你（或插件）不能修改上的任何东西，因为浏览器的限制你既不能直接将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 ); 

祝好运！