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

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

如何解决？

由于浏览器的限制，您（或插件）无法在 <input type="file" id="file-input"> 上修改任何内容，您也无法将 canvas 直接发送到服务器，因此这是唯一的方法（已使用并且效果很好）就是把图片的数据URI作为常规的text发送然后在服务器上解码，写成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 );

祝你好运！

Answer 2

经过一些研究，我找到了解决方案，感谢这个很棒的插件 https://github.com/blueimp/JavaScript-Canvas-to-Blob。 ( canvas-到-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);
  }
}

如何在保存到文件夹 (Javascript) 之前固定方向（上传图片）？

How do I fix orientation (upload image) before saving in folder (Javascript)?

javascript

php

jquery

image

image-uploading