Expressアプリケーションでアップロード時のオリエンテーションEXIFデータを尊重するにはどうすればよいですか？

Question

multerを使用してS3バケットに画像をアップロードするExpressアプリケーションがあります。私は特別なことはしません。まっすぐなアップロードですが、ブラウザに表示されているときには、iPhoneの画像が横になっています。

これは技術的にブラウザのバグで、Firefoxはimage-orientationのルールをサポートしていますが、Chromeは依然として画像を横に表示しています。

ExpressにEXIFデータを読み込ませてアップロードする前に回転させる方法はありますか？

Answer 1

私はそれを理解しました。私はJavaScript Load ImageとFormData APIの組み合わせを使用しました。

まず、イメージをロードしてexifデータからイメージの向きを取得し、回転させます。私は、画像を提供し、それはまだこれをサポートしていないとして、ブロブに（あなたもiOS用.toBlob()polyfillを必要とするかもしれないことを変換ロードキャンバス出力を変換しています。

を、その後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'); 
} 

すべての情報はそこにありますが、複数のリソースに広がっています。うまくいけば、これは誰かに多くの時間と推測を救うでしょう。