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

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

如何解决？

由于浏览器限制，您（或插件）无法修改 <input type="file" id="file-input"> 上的任何内容，您也不能直接将画布发送到服务器，因此唯一的方法（使用并且效果很好）是发送数据 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 );

祝你好运！

Answer 2

经过一番研究，我找到了解决方案，这要归功于这个出色的插件 https://github.com/blueimp/JavaScript-Canvas-to-Blob。 (canvas-to-blob.js)

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