如何让我的Express应用程序尊重上传的Orientation EXIF数据？

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

我知道这在技术上是一个浏览器错误，Firefox现在支持image-orientation规则，但Chrome仍然显示在他们身边的图像。

有没有一种方法，我可以有快速读取EXIF数据，只需旋转它们上传之前？

Answer 1

对，我知道了。 我使用JavaScript加载图像和FormData API的组合。

首先，我使用加载图像从exif数据中获取图像的方向并旋转它。 然后我转换Load Image提供的canvas输出并将其转换为blob（您可能还需要.toBlob() iOS，因为它不支持这一点。

然后，该Blob被附加到FormData对象，我也把它放回DOM的文件预览。

 // 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; }); }; }); 

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

 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'); } 

所有的信息都在那里，但它分布在多个资源，希望这将节省一个人很多时间和猜测。