如何使我的Express应用程序在上传时尊重Orientation EXIF数据? [英] How can I get my Express app to respect the Orientation EXIF data on upload?

问题描述

我有一个Express应用程序，该应用程序使用 multer 将图像上传到S3存储桶.我没有做任何特别的事情，只是直接上传，但是当它们显示在浏览器中时，一些iPhone图像就横摆了.

I have an Express application that uses multer to upload images to an S3 bucket. I'm not doing anything special, just a straight upload, but when they are displayed in the browser some of the iPhone images are sideways.

我知道从技术上讲这是一个浏览器错误，Firefox现在支持 图像方向 规则，但Chrome仍会在图像的侧面显示图像.

I know this is technically a browser bug and Firefox now supports the image-orientation rule, but Chrome still displays the images on their side.

有没有办法让Express读取EXIF数据并在上传之前旋转它们?

Is there a way I can have Express read the EXIF data and just rotate them before uploading?

推荐答案

对，我知道了.我使用了 JavaScript加载图像和

Right, I figured it out. I used a combination of JavaScript Load Image and the FormData API.

首先，我使用加载图像"从exif数据获取图像的方向并将其旋转.然后，我将转换Load Image提供的画布输出并将其转换为Blob(您可能还需要 .toBlob()

First I'm using Load Image to get the orientation of the image from the exif data and rotating it. I'm then converting the canvas output that Load Image provides and converting that to a blob (you may also need the .toBlob() polyfill for iOS as it does not support this yet.

然后将该blob附加到 FormData 对象，并且我还将其放回DOM中以进行文件预览.

That blob is then attached to the FormData object and I'm also putting it back in the DOM for a file preview.

// We need a new FormData object for submission.
var formData = new FormData();

// Load the image.
loadImage.parseMetaData(event.target.files[0], function (data) {
  var options = {};

  // Get the orientation of the image.
  if (data.exif) {
    options.orientation = data.exif.get('Orientation');
  }

  // Load the image.
  loadImage(event.target.files[0], function(canvas) {
    canvas.toBlob(function(blob) {
      // Set the blob to the image form data.
      formData.append('image', blob, 'thanksapple.jpg');
      // Read it out and stop loading.
      reader.readAsDataURL(blob);

      event.target.labels[0].innerHTML = labelContent;
    }, 'image/jpeg');
  }, options);

  reader.onload = function(loadEvent) {
    // Show a little image preview.
    $(IMAGE_PREVIEW).attr('src', loadEvent.target.result).fadeIn();
    // Now deal with the form submission.
    $(event.target.form).submit(function(event) {
      // Do it over ajax.
      uploadImage(event, formData);
      return false;
    });
  };
});

现在使用 uploadImage 函数，我正在使用jQuery的AJAX方法.请注意 processData 和 contentType 标志，它们很重要.

Now for the uploadImage function which I'm using jQuery's AJAX method for. Note the processData and contentType flags, they are important.

function uploadImage(event, formData) {
  var form = event.target;

  $.ajax({
    url: form.action,
    method: form.method,
    processData: false,
    contentType: false,
    data: formData
  }).done(function(response) {
    // And we're done!
  });

  // Remove the event listener.
  $(event.target).off('submit');
}

所有信息都已存在，但分布在多种资源中，希望这可以节省很多时间和猜测.

All the info is out there but it's spread across multiple resources, hopefully this will save someone a lot of time and guessing.

这篇关于如何使我的Express应用程序在上传时尊重Orientation EXIF数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！