javascript - 如何在保存到文件夹(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 。 (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 = $('<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);
  }
}