如何在保存到文件夾（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); 

祝你好運！