Xoay hình ảnh kém

Question

Tôi gặp sự cố với JavaScript khi hiển thị hình ảnh trước khi tải lên theo đúng vòng quay. Có vẻ như khi bạn render phù thủy hình ảnh có vòng quay chính xác chỉ trên dữ liệu exif, trình duyệt không sử dụng nó.

Người dùng thấy xoay vòng khác nhau giữa những gì họ có trên hệ thống của họ khi hình ảnh được hiển thị trên trang web bằng JavaScript.

Mã rất cơ bản:

Bạn có biết cách đơn giản để sửa lỗi xoay này không?

LbEmeraude.handleImage = function (f) { 
    if (f.type.match('image.*')) { 
     var reader = new FileReader(); 
     reader.onload = (function (file) { 
      return function (e) { 
       var image = {}; 
       image.dataAsUrl = e.target.result; 
       LbEmeraude.renderImage(image); 
      }; 
     })(f); 
     var image = reader.readAsDataURL(f); 
    } 
} 

LbEmeraude.renderImage = function (image) { 

    var eImage = LbEmeraude.createImgElement(image.dataAsUrl); 
    $('someElement').append(eImage); 

}; 

LbEmeraude.createImgElement = function (src) { 
    var image = document.createElement("img"); 
    image.src = src; 
    return image; 
} 

Cảm ơn sự quan tâm của bạn.

Answer 1

gì bạn đang yêu cầu là không có gì mới ... kiểm tra này: https://bugzilla.mozilla.org/show_bug.cgi?id=298619

Sucker Đó được khai trương vào năm 2005 và chưa được giải quyết chưa. Bài viết này cũ nhưng thực sự mạnh mẽ: http://www.daveperrett.com/articles/2012/07/28/exif-orientation-handling-is-a-ghetto/

Nhưng phần quan trọng trong đó là khá xa nơi anh ấy lưu ý rằng trình duyệt thường không áp dụng xoay vòng exif khi trong thẻ html img, nhưng có thể tôn trọng nó khi mở hình ảnh trong tab riêng của nó.

Hiện tại, không có trình duyệt nào thực hiện theo mặc định, các ứng dụng web dường như làm chủ yếu nhận được giá trị đó trên máy chủ và phân phát các nội dung khác nhau.

Nhưng có vẻ như có hy vọng nếu bạn muốn hack nó trong: Accessing JPEG EXIF rotation data in JavaScript on the client side