2012-12-20 24 views
18

Tôi có một điều khiển tệp HTML bằng cách sử dụng tính năng này, tôi đang cố gắng tải lên tệp trên máy chủ.Ảnh chụp tự động xoay trong khi tải lên trong IOS 6.0 hoặc iPhone

  • Bấm vào kiểm soát tập tin
  • Nó sẽ tự động mở hộp thoại để lựa chọn tập tin/camera.
  • tôi chọn máy ảnh
  • tôi bắt ảnh và lưu
  • Bây giờ nộp mẫu
  • ảnh Capture lưu thành công trên máy chủ nhưng nó có thể xoay 90 độ .

Sự cố này chỉ xảy ra với iPhone hoặc iOS.

<input id="image" name="image" type="file" accept="image/*" capture style="width: 58px" /> 

Vui lòng cho tôi biết, cách dừng xoay hình ảnh tự động nếu được chụp từ máy ảnh.

Cảm ơn, Imdadhusen

+0

Tôi đã gặp sự cố tương tự, nhưng câu trả lời được chấp nhận trên chuỗi SO này http://stackoverflow.com/questions/18519160/exif-image-rotation-issue-using-carrierwave-and-rmagick-to-upload- to-s3 đã làm việc cho tôi! – Ali

+0

@imdadhusen bạn có sắp xếp ra vấn đề này không? Tôi đang đối mặt với cùng một vấn đề. Vui lòng cập nhật câu trả lời tại đây nếu bạn đã giải quyết nó. Cảm ơn – harsh4u

Trả lời

28

Điều này có thể có cái gì để làm với thẻ meta EXIF ​​/ TIFF trong hình ảnh.

Một trong các thẻ này cho biết hướng của hình ảnh. Một số ảnh bạn tải lên máy chủ (ví dụ: từ iPhone) có thể có các thẻ này, những ảnh khác (từ nguồn/quy trình làm việc khác) có thể không. Máy chủ có thể hoặc không thể giữ lại các thẻ này và có thể hoặc không thể đọc các thẻ để cố định hướng chính xác của hình ảnh. Tương tự như vậy một trình duyệt web có thể hoặc không thể chú ý đến các thẻ này. Nếu bạn tải lên hình ảnh chứa thẻ, kết quả chắc chắn sẽ không thể đoán trước được.

Một cách hay để tìm hiểu xem đây có phải là vấn đề hay không là tải xuống hình ảnh 'sự cố' và hình ảnh 'tốt' từ máy chủ và so sánh chúng. Mở chúng trong bản xem trước và kiểm tra tab thứ hai của Thanh tra. Mọi thông tin meta sẽ được hiển thị ở đó. Xem một hình ảnh có thông tin định hướng hay không và hình kia không. Nếu không hiển thị siêu thông tin thì rất có khả năng máy chủ đang loại bỏ tất cả và không sử dụng nó, và bạn có thể quên câu trả lời này.

Ngoài ra, bạn nên so sánh trong các trình duyệt khác nhau. Một số trình duyệt đọc thông tin định hướng này và xoay hình ảnh cho phù hợp, những người khác thì không.

Ví dụ, một chiếc iPhone ảnh của tôi mà đã mất ở chế độ dọc có thẻ meta sau:

  • Pixel Chiều cao: 2.448
  • Pixel Width: 3,264
  • Định hướng: 6 (Quay 90 ° CCW)

Định hướng bitmap gốc là phong cảnh.
Thẻ meta 'hướng' cho biết phần mềm đọc hình ảnh xoay sang chân dung để hiển thị.

Thẻ meta được sử dụng bởi (một số) phần mềm hình ảnh để 'chính xác' xoay hình ảnh thành dọc nhưng bị bỏ qua bởi phần mềm khác sẽ hiển thị hình ảnh dưới dạng ngang.

Tình huống khó hiểu và không có tiêu chuẩn được thiết lập (thẻ chỉ là gợi ý), vì vậy khi chuẩn bị hình ảnh cho ấn phẩm trực tuyến, điều an toàn nhất là loại bỏ các thẻ này và xoay hình ảnh một cách chính xác Định hướng BITMAP trước khi tải lên. Nếu bạn đang viết phía máy chủ của một ứng dụng, bạn có thể làm điều này trên máy chủ. Nhưng điều quan trọng là cung cấp hình ảnh cho trình duyệt web theo đúng định hướng BITMAP không có thẻ meta định hướng.

Tại sao điều này? Bởi vì ngay cả ngày nay các trình duyệt khác nhau cũng có cách tiếp cận khác nhau đối với thẻ meta.

Hình ảnh iPhone tôi chỉ đề cập đến màn hình như sau:
Google Chrome 24 chân dung
Safari 6 chân dung
Firefox 17 cảnh quan
Opera 12 cảnh quan

Không phải là một vĩ đại tình trạng!

+2

Cảm ơn bạn rất nhiều vì câu trả lời chi tiết của bạn. Có cách nào để xác định thẻ meta ở phía máy khách bằng javascript hay jquery không. – imdadhusen

+0

Có thư viện javascript cho việc này. Tôi đã thành công với exif-js –

Các vấn đề liên quan