Thẻ img hiển thị sai hướng

142

Tôi có một hình ảnh tại liên kết này: http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg

Như bạn có thể thấy, đây là một hình ảnh bình thường với định hướng chính xác. Tuy nhiên, khi tôi đặt liên kết này thành thuộc tính src của thẻ hình ảnh của mình, hình ảnh sẽ bị lộn ngược. http://jsfiddle.net/7j5xJ/

<img src="http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg" width="200"/>
Mở rộng đoạn trích

Bạn có biết điều gì đang xảy ra không?

html  css  image 
— Nhật ký lười biếng
nguồn
Trong firefox, nó lộn ngược trong cả hai trường hợp. Tôi nghĩ Chrome đủ thông minh để tự động xoay nó dựa trên thông tin EXIF.
— dfsq
Hmm, thật sao? Trong firefox của tôi, bản gốc vẫn bình thường và hình ảnh trong img bị lộn ngược.
— Nhật ký lười biếng
1
Tôi nghĩ rằng hình ảnh bị lộn ngược và cloudfrontcó thể xoay nó trong trang. Bạn có thể buộc xoay qua CSS jsfiddle.net/7j5xJ/1
— Kevin Lynch
2
regex.info/ Nhật Bản Nó có Orientation: Rotate 180trong EXIF.
— dfsq
1
Đó là một vấn đề với siêu dữ liệu ảnh chỉ định hướng. Tôi không biết tại sao thẻ hình ảnh không giải thích điều này. Tôi chưa tìm thấy câu trả lời hay nào ...
— Chet

Câu trả lời:

91

Tôi tìm thấy một phần của giải pháp. Hình ảnh bây giờ có siêu dữ liệu xác định hướng của ảnh. Có một thông số CSSimage-orientation mới cho .

Chỉ cần thêm nó vào CSS của bạn:

img {
    image-orientation: from-image;
}

Theo thông số kỹ thuật kể từ ngày 25 tháng 1 năm 2016, Firefox và iOS Safari (đằng sau tiền tố) là các trình duyệt duy nhất hỗ trợ điều này. Tôi vẫn thấy sự cố với Safari và Chrome. Tuy nhiên, Safari di động dường như hỗ trợ định hướng mà không cần thẻ CSS.

Tôi cho rằng chúng ta sẽ phải chờ xem liệu các trình duyệt có bắt đầu hỗ trợ hay không image-orientation.

— Chet
nguồn
3
Các trình duyệt lạ mà tôi đã thử nghiệm (Safari, Chrome và Firefox trên Mac trong các phiên bản gần đây của họ) xử lý cờ đúng cách khi hình ảnh được hiển thị trực tiếp mà không có bất kỳ HTML nào xung quanh nó.
— anw
2
Cẩn thận với điều này vì nó là thử nghiệm. Kiểm tra tính tương thích của Trình duyệt, nó không phù hợp với hầu hết các trình duyệt. Hy vọng họ sẽ sắp xếp điều này vào một lúc nào đó.
— lostintranslation
35
Điều này không tương thích với hầu hết các trình duyệt hiện nay caniuse.com/#search=image-orientation
— Gabriel C
2
Tại sao trên thế giới hình ảnh thậm chí có siêu dữ liệu định hướng? Nếu bạn thực sự muốn xoay hình ảnh thì bạn sẽ không thay đổi các pixel và hoán đổi chiều rộng cho chiều cao chứ?
— Jack Giffin
15
Làm thế nào điều này có rất nhiều upvote? Nó cực kỳ không được hỗ trợ và không hoạt động cho bất cứ điều gì ngoài firefox caniuse.com/#search=image-orientation
— Một người bạn
26

Hình ảnh của bạn thực sự bị đảo lộn. Nhưng nó có thuộc tính meta "Định hướng" cho người xem biết nó phải được xoay 180 độ. Một số thiết bị / người xem không tuân theo quy tắc này.

Mở nó trong Chrome: đúng cách Mở nó trong FF: đúng cách lên Mở nó trong IE: lộn ngược

Mở nó trong Paint: Upside down Mở nó trong Photoshop: Right up up. Vân vân.

— i-CONica
nguồn
1
Bạn có biết làm thế nào chúng ta có thể ngăn chặn những điều này trước khi người dùng tải lên hình ảnh không? Vì hình ảnh này được người dùng tải lên trực tiếp nên tôi cần tìm cách khắc phục điều này
— Nhật ký lười biếng
Nếu đó là một dịch vụ sẽ lưu trữ hình ảnh, thì tốt nhất bạn nên mã hóa lại hình ảnh, vì lý do giảm thiểu, kích thước tệp và bảo mật, vì vậy điều này có thể khắc phục chúng trong phiên bản được mã hóa lại.
— i-CONICA
Tôi hiểu rồi. Tôi sẽ cần phải tìm một cách tốt hơn để xử lý việc này. Có lẽ tôi cần xử lý hình ảnh sau khi nó được tải lên S3
— Nhật ký lười biếng
Bạn có thể sử dụng thư viện GD trong PHP.
— i-CONICA
5
Một cách đơn giản hơn sẽ là loại bỏ siêu dữ liệu định hướng và lật hình ảnh. Imagemagick cung cấp chức năng chuyển đổi tự động sẽ làm điều này.
— saurabheights
19

Nếu bạn có quyền truy cập vào Linux, sau đó mở một thiết bị đầu cuối, cd vào thư mục chứa hình ảnh của bạn và sau đó chạy

mogrify -auto-orient *

Điều này sẽ khắc phục vĩnh viễn các vấn đề định hướng trên tất cả các hình ảnh.

— Paul Chris Jones
nguồn
4
Điều này làm việc cho tôi, bạn có thể cần phải chạy brew install imagemagicktrên mac nếu bạn nhận đượccommand not found: mogrify
— Kyle
Cho đến khi hình ảnh tiếp theo .. nó có bất kỳ nhược điểm?
— Harry Bosh
12

Tôi quên thêm câu trả lời của riêng tôi ở đây. Tôi đã sử dụng Ruby on Rails vì vậy nó có thể không áp dụng được cho các dự án của bạn trong PHP hoặc các khung công tác khác. Trong trường hợp của tôi, tôi đã sử dụng đá quý Carrierwave để tải lên hình ảnh. Giải pháp của tôi là thêm đoạn mã sau vào lớp trình tải lên để khắc phục sự cố EXIF ​​trước khi lưu tệp.

process :fix_exif_rotation
def fix_exif_rotation
  manipulate! do |img|
    img.auto_orient!
    img = yield(img) if block_given?
    img
  end
end
— Nhật ký lười biếng
nguồn
1
câu trả lời tốt nhưng làm thế nào tôi có thể gọi phương thức này trên tập tin hình ảnh hiện có?
— Ma trận
Bạn phải tạo lại các phiên bản. Tôi đoán một cái gì đó như thế này sẽ hoạt động: stackoverflow.com/a/9065832/461640
— Nhật ký lười biếng
11

tiết kiệm như png đã giải quyết vấn đề cho tôi.

— Seyed Mostafa Mousavi Kahaki
nguồn
1
Giải pháp này chỉ hữu ích cho các hình ảnh không phải là ảnh: "Định dạng JPG là định dạng tệp nén bị mất. Điều này hữu ích cho việc lưu trữ ảnh ở kích thước nhỏ hơn BMP. JPG là lựa chọn phổ biến để sử dụng trên Web vì nó là được nén. Để lưu trữ các bản vẽ đường, văn bản và đồ họa mang tính biểu tượng ở kích thước tệp nhỏ hơn, GIF hoặc PNG là lựa chọn tốt hơn vì chúng không bị mất. " - labnol.org/software/tutorials/ từ
— Kc Gibson
tuyệt vời, được giải quyết cảm ơn
— T. Shashwat
2
Đã lưu nó dưới dạng PNG, sau đó quay lại JPG để giữ kích thước tệp thấp và lưu định hướng chính xác, cảm ơn.
— MDave
10

Câu trả lời này được xây dựng dựa trên câu trả lời của bsap bằng Exif-JS , nhưng không dựa vào jQuery và khá tương thích ngay cả với các trình duyệt cũ hơn. Sau đây là các tệp html và js:

xoay.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
  <html>
  <head>
    <style>
      .rotate90 {
       -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
       -o-transform: rotate(90deg);
       -ms-transform: rotate(90deg);
       transform: rotate(90deg);
      }
      .rotate180 {
       -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
       -o-transform: rotate(180deg);
       -ms-transform: rotate(180deg);
       transform: rotate(180deg);
      }
      .rotate270 {
       -webkit-transform: rotate(270deg);
       -moz-transform: rotate(270deg);
       -o-transform: rotate(270deg);
       -ms-transform: rotate(270deg);
       transform: rotate(270deg);
      }
    </style>
  </head>
  <body>
    <img src="pic/pic03.jpg" width="200" alt="Cat 1" id="campic" class="camview">
    <script type="text/javascript" src="exif.js"></script>
    <script type="text/javascript" src="rotate.js"></script>
  </body>
  </html>

rotation.js:

window.onload=getExif;
var newimg = document.getElementById('campic');
function getExif() {
    EXIF.getData(newimg, function() {
            var orientation = EXIF.getTag(this, "Orientation");
            if(orientation == 6) {
                newimg.className = "camview rotate90";
            } else if(orientation == 8) {
                newimg.className = "camview rotate270";
            } else if(orientation == 3) {
                newimg.className = "camview rotate180";
            }
        });
};
— VMQ
nguồn
exif-js hiện đã lỗi thời và không được bảo trì đến nỗi nó bị lỗi trong một số môi trường, chẳng hạn như bất cứ nơi nào có chế độ nghiêm ngặt được bật. Chúng tôi thực sự cần một giải pháp cho việc này. Ứng dụng của tôi làm tôi thất vọng và mọi công việc tôi tìm thấy đều có những nhược điểm.
— phương pháp
9

Bạn có thể sử dụng Exif-JS , để kiểm tra thuộc tính "Định hướng" của hình ảnh. Sau đó áp dụng một biến đổi css khi cần thiết.

EXIF.getData(imageElement, function() {
                var orientation = EXIF.getTag(this, "Orientation");

                if(orientation == 6)
                    $(imageElement).css('transform', 'rotate(90deg)')
});
— bsap
nguồn
7

Vấn đề này đã khiến tôi phát điên. Tôi đã sử dụng PHP ở phía máy chủ của mình vì vậy tôi không thể sử dụng các giải pháp @The Lazy Log (ruby) & @deweydb (python). Tuy nhiên nó chỉ cho tôi đi đúng hướng. Tôi đã sửa nó trên backback bằng cách sử dụng getImageOrientation () của Imagick.

<?php 
// Note: $image is an Imagick object, not a filename! See example use below. 
function autoRotateImage($image) { 
    $orientation = $image->getImageOrientation(); 

    switch($orientation) { 
        case imagick::ORIENTATION_BOTTOMRIGHT: 
            $image->rotateimage("#000", 180); // rotate 180 degrees 
        break; 

        case imagick::ORIENTATION_RIGHTTOP: 
            $image->rotateimage("#000", 90); // rotate 90 degrees CW 
        break; 

        case imagick::ORIENTATION_LEFTBOTTOM: 
            $image->rotateimage("#000", -90); // rotate 90 degrees CCW 
        break; 
    } 

    // Now that it's auto-rotated, make sure the EXIF data is correct in case the EXIF gets saved with the image! 
    $image->setImageOrientation(imagick::ORIENTATION_TOPLEFT); 
} 
?>

Đây là liên kết nếu bạn muốn đọc thêm. http://php.net/manual/en/imagick.getimageorientation.php

— người dùng4504661
nguồn
6

Đó là dữ liệu EXIF ​​mà điện thoại Samsung của bạn kết hợp.

— Dấu vết DeCoy
nguồn
1
À, vậy điều này chỉ xảy ra với những hình ảnh được chụp bởi điện thoại Samsung?
— Nhật ký lười biếng
4
Xảy ra với một số. Tôi cũng đã thấy nó trên iPhone.
— Trace DeCoy
Siêu dữ liệu EXIF ​​có thể bao gồm thông tin về chính bức ảnh (tốc độ màn trập, khẩu độ ống kính, độ nhạy iso, khoảng cách lấy nét, v.v.), dữ liệu ngữ cảnh (ngày, thời gian, nhiệt độ, độ ẩm) và có thể chứa tọa độ GPS cũng như góc xoay được làm tròn lên đến 90 ° nhiều. Phần lớn điện thoại thông minh và máy ảnh ngày nay đặt các siêu dữ liệu này vào khối EXIF, vì vậy IMHO chỉ là vấn đề thời gian mà các trình duyệt áp dụng xoay khung chính xác tự động.
— ManuelJE
5

Cho đến khi CSS: image-orientation:from-image;được hỗ trợ phổ biến hơn, chúng tôi đang thực hiện giải pháp phía máy chủ với python. Đây là ý chính của nó. Bạn kiểm tra dữ liệu exif để định hướng, sau đó xoay hình ảnh phù hợp và lưu lại.

Chúng tôi thích giải pháp này hơn các giải pháp phía máy khách vì nó không yêu cầu tải thêm thư viện phía máy khách và thao tác này chỉ phải thực hiện một lần khi tải tệp lên.

if fileType == "image":
    exifToolCommand = "exiftool -j '%s'" % filePath
    exif = json.loads(subprocess.check_output(shlex.split(exifToolCommand), stderr=subprocess.PIPE))
    if 'Orientation' in exif[0]:
        findDegrees, = re.compile("([0-9]+)").search(exif[0]['Orientation']).groups()
        if findDegrees:
            rotateDegrees = int(findDegrees)
            if 'CW' in exif[0]['Orientation'] and 'CCW' not in exif[0]['Orientation']:
                rotateDegrees = rotateDegrees * -1
            # rotate image
            img = Image.open(filePath)
            img2 = img.rotate(rotateDegrees)
            img2.save(filePath)
— deweydb
nguồn
3

Nó xảy ra do định hướng ban đầu của hình ảnh không như chúng ta thấy trong trình xem ảnh. Trong những trường hợp như vậy, hình ảnh được hiển thị dọc cho chúng ta trong trình xem hình ảnh nhưng thực tế nó nằm ngang.

Để giải quyết vấn đề này, hãy làm như sau:

  1. Mở hình ảnh trong trình chỉnh sửa hình ảnh như paint (trong windows) hoặc ImageMagick (trong linux).

  2. Xoay hình ảnh trái / phải.

  3. Lưu hình ảnh.

Điều này sẽ giải quyết vấn đề vĩnh viễn.

— Yuvraj Patil
nguồn
1

Một cách dễ dàng để khắc phục sự cố, sans mã hóa, là sử dụng chức năng xuất cho Save for Web của Photoshop. Trong hộp thoại, người ta có thể chọn xóa tất cả hoặc hầu hết dữ liệu EXIF ​​của hình ảnh. Tôi thường chỉ giữ bản quyền và thông tin liên lạc. Ngoài ra, vì hình ảnh đến trực tiếp từ máy ảnh kỹ thuật số quá khổ để hiển thị web, dù sao đi nữa, bạn nên thu nhỏ chúng thông qua Save for Web. Đối với những người không am hiểu về Photoshop, tôi không nghi ngờ gì rằng có các tài nguyên trực tuyến để thay đổi kích thước hình ảnh và tước nó khỏi bất kỳ dữ liệu EXIF ​​không cần thiết nào.

— AlGator
nguồn
4
Nhưng nếu bạn đang phát triển một ứng dụng mà người dùng có thể chọn bất kỳ hình ảnh nào để tải lên, làm thế nào để sử dụng Photoshop trong trường hợp đó? :)
— Nhật ký lười biếng
1

Tôi nghĩ rằng có một số vấn đề trong trình duyệt tự động sửa hướng hình ảnh, ví dụ: nếu tôi truy cập trực tiếp vào hình ảnh, nó hiển thị đúng hướng, nhưng hiển thị hướng sai trong một số trang html thoát.

— Kai Zou
nguồn
-19

Sử dụng kiểu dáng bên ngoài. trong bảng html cung cấp tên lớp cho thẻ. trong biểu định kiểu, sử dụng toán tử dấu chấm được đặt trước tên lớp và sau đó viết mã sau đây

.rotate180 {
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 transform: rotate(180deg);
 }
— msd
nguồn
Nó không phải là một giải pháp tổng quát. Sẽ hoạt động cụ thể trên hình ảnh được cung cấp trong câu hỏi
— th3pirat3
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.