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

Question

我试试这个参考：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) 
}) 

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

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

Answer 1

经过一番研究，我找到了解决方案，这要归功于这个伟大的插件https://github.com/blueimp/JavaScript-Canvas-to-Blob。 （帆布到blob.js）

这个插件将你的画布转换为Blob直接服务器会看到它就好像它是一个实际的文件，将获得新的（修改）的文件中，你$ _FILES数组。您只需要在画布对象上拨打toBlob（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); 
    } 
} 

Answer 2

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

如何解决？

这是特殊性努力，你（或插件）不能修改<input type="file" id="file-input">任何由于浏览器的限制，无论是你可以直接发送画布到服务器，这样的唯一方法（使用和伟大工程）被发送的数据URI图像作为一个经常文本，然后在服务器上进行解码，将其写入file.You可能还需要发送原始文件名，因为数据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); 

祝你好运！