如何在保存到文件夹(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 = $('<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？

解决方法:

经过一些研究,我找到了解决方案,感谢这个伟大的插件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);
  }
}

标签：image-uploading,javascript,php,jquery,image
来源： https://codeday.me/bug/20190926/1820444.html