แท็ก img แสดงทิศทางไม่ถูกต้อง

142

ฉันมีภาพที่ลิงค์นี้: http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg

อย่างที่คุณเห็นนี่เป็นภาพปกติที่มีการวางแนวที่ถูกต้อง อย่างไรก็ตามเมื่อฉันตั้งค่าลิงค์นี้เป็น src attribute ของแท็กรูปภาพของฉันรูปภาพจะกลับหัว http://jsfiddle.net/7j5xJ/

<img src="http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg" width="200"/>

ขยายตัวอย่างข้อมูล

คุณมีความคิดว่าเกิดอะไรขึ้น?

html css image

— บันทึกขี้เกียจ
แหล่งที่มา

ใน Firefox มันกลับหัวกลับหางทั้งสองกรณี ฉันคิดว่า Chrome ฉลาดพอที่จะหมุนมันโดยอัตโนมัติตามข้อมูล EXIF

— dfsq

อืมจริงเหรอ? ใน firefox ของฉันต้นฉบับยังคงเป็นปกติและรูปภาพใน img กลับด้าน

— บันทึก Lazy

1

ฉันคิดว่าภาพตัวเองกลับหัวและcloudfrontสามารถหมุนได้ในหน้า คุณสามารถบังคับให้หมุนผ่าน CSS jsfiddle.net/7j5xJ/1

— Kevin Lynch

2

regex.info/…มีOrientation: Rotate 180ใน EXIF

— dfsq

1

เป็นปัญหาเกี่ยวกับข้อมูลเมตาของภาพถ่ายที่ระบุการวางแนว ฉันไม่รู้ว่าทำไมแท็กรูปภาพไม่สามารถอธิบายได้ ฉันไม่ได้พบคำตอบที่ดีใด ๆ ...

— เชษฐ์

91

ฉันพบส่วนหนึ่งของการแก้ปัญหา ขณะนี้รูปภาพมีข้อมูลเมตาที่ระบุการวางแนวของภาพถ่าย มีใหม่เป็นสเปค CSS image-orientationสำหรับ

เพียงเพิ่มลงใน CSS ของคุณ:

img {
    image-orientation: from-image;
}

ตามข้อมูลจำเพาะ ณ วันที่ 25 มกราคม 2016 Firefox และ iOS Safari (หลังคำนำหน้า) เป็นเบราว์เซอร์เดียวที่รองรับสิ่งนี้ ฉันเห็นปัญหาเกี่ยวกับ Safari และ Chrome อย่างไรก็ตาม Safari บนมือถือดูเหมือนว่าจะสนับสนุนการวางแนวโดยไม่มีแท็ก CSS

ฉันคิดว่าเราจะต้องรอและดูว่าเบราว์เซอร์จะสนับสนุนimage-orientationหรือไม่

— เชษฐ์
แหล่งที่มา

3

เบราว์เซอร์แปลก ๆ ที่ฉันทดสอบ (Safari, Chrome และ Firefox บน Mac ในสาขาล่าสุดของพวกเขา) จัดการกับการตั้งค่าสถานะอย่างถูกต้องเมื่อรูปภาพปรากฏขึ้นโดยตรงโดยไม่มี HTML อยู่รอบ ๆ

— anw

2

ระวังด้วยสิ่งนี้เพราะมันเป็นการทดลอง ตรวจสอบความเข้ากันได้ของเบราว์เซอร์ซึ่งไม่ได้ดูดีสำหรับเบราว์เซอร์ส่วนใหญ่ หวังว่าพวกเขาจะจัดเรียงในบางจุด

— สูญเสียการแปล

35

สิ่งนี้เข้ากันไม่ได้กับเบราว์เซอร์ส่วนใหญ่ในวันนี้caniuse.com/#search=image-orientation

— Gabriel C

2

เพราะเหตุใดในโลกถึงมีภาพเมตาดาต้า หากคุณต้องการหมุนภาพจริงๆคุณจะไม่เลื่อนพิกเซลไปมาแล้วสลับความกว้างเป็นความสูงใช่ไหม

— Jack Giffin

15

สิ่งนี้มี upvotes มากมายได้อย่างไร มันไม่ได้รับการสนับสนุนอย่างมากและไม่ทำงานเพื่อสิ่งใดนอกจาก firefox caniuse.com/#search=image-orientation

— เพื่อน

26

ภาพของคุณกลับหัวจริง แต่มันมีคุณสมบัติ meta "Orientation" ซึ่งบอกผู้ชมว่าควรจะหมุน 180 องศา อุปกรณ์ / ผู้ดูบางคนไม่ปฏิบัติตามกฎนี้

เปิดใน Chrome: ทางขวาขึ้นเปิดใน FF: ทางขวาขึ้นเปิดใน IE: กลับหัว

เปิดใน Paint: คว่ำลงเปิดใน Photoshop: ทางขวาขึ้น เป็นต้น

— I-CONICA
แหล่งที่มา

1

คุณมีความคิดใด ๆ ว่าเราจะป้องกันสิ่งเหล่านี้ก่อนที่ผู้ใช้จะอัพโหลดรูปภาพได้อย่างไร? ในฐานะที่เป็นภาพนี้อัปโหลดโดยตรงโดยผู้ใช้ดังนั้นฉันต้องการที่จะหาวิธีที่จะเอาชนะนี้

— เข้าสู่ระบบขี้เกียจ

หากเป็นบริการที่จะโฮสต์รูปภาพคุณควรทำการเข้ารหัสรูปภาพใหม่อีกครั้งเพื่อเหตุผลด้านมิติขนาดและความปลอดภัยดังนั้นจึงอาจแก้ไขได้ในเวอร์ชันที่เข้ารหัสใหม่

— ฉัน -CONICA

ฉันเห็น. ฉันจะต้องหาวิธีที่ดีกว่าในการจัดการกับสิ่งนี้ บางทีฉันอาจจำเป็นต้องประมวลผลภาพหลังจากอัปโหลดไปยัง S3

— บันทึก Lazy

คุณสามารถใช้ไลบรารี GD ใน PHP

— ฉัน -CONICA

5

วิธีที่ง่ายกว่าคือการลบข้อมูลเมตาของการวางแนวและพลิกภาพ Imagemagick ให้ฟังก์ชันการแปลง - อัตโนมัติซึ่งจะทำเช่นนี้

— saurabheights

19

หากคุณมีสิทธิ์เข้าถึง Linux ให้เปิดเทอร์มินัลแล้วไปยังไดเร็กตอรี่ที่มีอิมเมจของคุณแล้วเปิดใช้งาน

mogrify -auto-orient *

การดำเนินการนี้ควรแก้ไขปัญหาการวางแนวของภาพทั้งหมดอย่างถาวร

— พอลคริสโจนส์
แหล่งที่มา

4

สิ่งนี้ได้ผลสำหรับฉันคุณอาจต้องใช้brew install imagemagickmac ถ้าคุณได้รับcommand not found: mogrify

— Kyle

จนกระทั่งภาพถัดไป .. มันมีข้อเสียหรือไม่?

— Harry Bosh

12

ฉันลืมเพิ่มคำตอบของตัวเองที่นี่ ฉันใช้ Ruby on Rails ดังนั้นจึงอาจไม่สามารถใช้ได้กับโครงการของคุณใน PHP หรือเฟรมเวิร์กอื่น ๆ ในกรณีของฉันฉันใช้ Carrierwave gem เพื่ออัพโหลดรูปภาพ วิธีแก้ปัญหาของฉันคือการเพิ่มรหัสต่อไปนี้ไปยังคลาสผู้อัปโหลดเพื่อแก้ไขปัญหา EXIF ก่อนบันทึกไฟล์

process :fix_exif_rotation
def fix_exif_rotation
  manipulate! do |img|
    img.auto_orient!
    img = yield(img) if block_given?
    img
  end
end

— บันทึกขี้เกียจ
แหล่งที่มา

1

คำตอบที่ดี แต่ฉันจะเรียกวิธีนี้ในไฟล์ภาพที่มีอยู่ได้อย่างไร

— เมทริกซ์

คุณต้องสร้างเวอร์ชันใหม่ ฉันเดาว่าสิ่งนี้จะทำงานได้: stackoverflow.com/a/9065832/461640

— The Lazy Log

11

บันทึกเป็น png แก้ปัญหาให้ฉัน

— Seyed Mostafa Mousavi Kahaki
แหล่งที่มา

1

โซลูชันนี้มีประโยชน์สำหรับรูปภาพที่ไม่ใช่ภาพถ่ายเท่านั้น: "รูปแบบ JPG เป็นรูปแบบไฟล์บีบอัดที่สูญเสียซึ่งมีประโยชน์สำหรับการจัดเก็บภาพถ่ายที่มีขนาดเล็กกว่า BMP JPG เป็นตัวเลือกทั่วไปสำหรับการใช้งานบนเว็บเนื่องจากเป็น ถูกบีบอัดสำหรับการจัดเก็บภาพวาดลายเส้นข้อความและกราฟิกส์แบบไอคอนที่ขนาดไฟล์เล็กกว่า GIF หรือ PNG เป็นตัวเลือกที่ดีกว่าเพราะไม่สูญเสีย " - labnol.org/software/tutorials/…

— Kc Gibson

สุดยอด, แก้ไขได้ขอบคุณ

— T. Shashwat

2

บันทึกเป็น PNG จากนั้นกลับสู่ JPG อีกครั้งซึ่งทำให้ขนาดไฟล์ต่ำและบันทึกการวางแนวอย่างถูกต้องขอบคุณ

— MDave

10

คำตอบนี้สร้างขึ้นจากคำตอบของ bsap โดยใช้Exif-JSแต่ไม่พึ่งพา jQuery และเข้ากันได้ดีกับเบราว์เซอร์รุ่นเก่า ต่อไปนี้เป็นตัวอย่างไฟล์ html และ js:

rotate.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>

rotate.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
แหล่งที่มา

exif-js ตอนนี้ล้าสมัยและไม่ได้รับการบำรุงรักษาซึ่งล้มเหลวในบางสภาพแวดล้อมเช่น anyplace ที่เปิดใช้งานโหมดเข้มงวด เราต้องการทางออกสำหรับสิ่งนี้ แอปของฉันทำลายอึออกไปจากฉันและการทำงานทุกอย่างที่ฉันพบมีข้อเสียอย่างมาก

— เมธอดิสต์

9

คุณสามารถใช้Exif-JSเพื่อตรวจสอบคุณสมบัติ "การวางแนว" ของภาพ จากนั้นใช้การแปลง css ตามต้องการ

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

                if(orientation == 6)
                    $(imageElement).css('transform', 'rotate(90deg)')
});

— ก.บช.
แหล่งที่มา

7

ปัญหานี้ก็ทำให้ฉันบ้าเหมือนกัน ฉันใช้ PHP ที่ฝั่งเซิร์ฟเวอร์ของฉันดังนั้นฉันจึงไม่สามารถใช้ @The Lazy Log (ruby) & @deweydb (python) โซลูชั่นได้ อย่างไรก็ตามมันชี้ให้ฉันไปในทิศทางที่ถูกต้อง ฉันแก้ไขมันในการสำรองข้อมูลโดยใช้ ImagI's getImageOrientation ()

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

นี่คือลิงค์ถ้าคุณต้องการอ่านเพิ่มเติม http://php.net/manual/en/imagick.getimageorientation.php

— user4504661
แหล่งที่มา

6

เป็นข้อมูล EXIF ที่โทรศัพท์ Samsung ของคุณใช้

— ติดตาม DeCoy
แหล่งที่มา

1

โอ้นี่เกิดขึ้นกับภาพที่ถ่ายโดยโทรศัพท์ซัมซุงเท่านั้นหรือ

— บันทึก Lazy

4

เกิดขึ้นกับหลาย ๆ ฉันเคยเห็นมันบน iPhone เช่นกัน

— ติดตาม DeCoy

ข้อมูลเมตา EXIF อาจรวมถึงข้อมูลเกี่ยวกับภาพถ่ายของตัวเอง (ความเร็วชัตเตอร์, รูรับแสงเลนส์, ความไวแสง iso, ระยะโฟกัส ฯลฯ ), ข้อมูลบริบท (วันที่, เวลา, อุณหภูมิ, ความชื้น) และอาจมีพิกัด GPS เช่นเดียวกับมุมการหมุน มากถึง 90 °หลายเท่า สมาร์ทโฟนและกล้องส่วนใหญ่ของวันนี้ใส่ข้อมูลเมตาเหล่านี้ในบล็อก EXIF ดังนั้น IMHO เป็นเพียงเรื่องของเวลาที่เบราว์เซอร์ใช้การหมุนเฟรมที่ถูกต้องโดยอัตโนมัติ

— ManuelJE

5

จนถึง CSS: image-orientation:from-image;ได้รับการสนับสนุนอย่างกว้างขวางมากขึ้นเรากำลังทำโซลูชันฝั่งเซิร์ฟเวอร์ด้วย python นี่คือส่วนสำคัญของมัน คุณตรวจสอบข้อมูล exif เพื่อหาทิศทางจากนั้นหมุนภาพตามลำดับและบันทึกใหม่

เราต้องการโซลูชันนี้เหนือโซลูชันฝั่งไคลเอ็นต์เนื่องจากไม่ต้องการโหลดฝั่งไคลเอ็นต์ไลบรารีเพิ่มเติมและการดำเนินการนี้จะเกิดขึ้นเพียงครั้งเดียวเมื่ออัพโหลดไฟล์

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
แหล่งที่มา

3

มันเกิดขึ้นเนื่องจากการวางแนวภาพต้นฉบับไม่เหมือนที่เราเห็นในโปรแกรมดูภาพ ในกรณีดังกล่าวภาพจะปรากฏตามแนวตั้งให้เราในโปรแกรมดูรูปภาพ แต่เป็นแนวนอนตามความเป็นจริง

ในการแก้ไขปัญหาให้ทำดังนี้

เปิดภาพในโปรแกรมแก้ไขภาพเช่นโปรแกรมระบายสี (ใน windows) หรือ ImageMagick (ใน linux)
หมุนภาพไปทางซ้าย / ขวา
บันทึกภาพ

สิ่งนี้ควรแก้ไขปัญหานี้อย่างถาวร

— ยุวดีพาติล
แหล่งที่มา

1

วิธีง่าย ๆ ในการแก้ไขปัญหาการเข้ารหัสคือการใช้ฟังก์ชั่นการส่งออกของ Save for Web ของ Photoshop ในกล่องโต้ตอบหนึ่งสามารถเลือกที่จะลบข้อมูล EXIF ทั้งหมดหรือส่วนใหญ่ของภาพ ฉันมักจะเก็บลิขสิทธิ์และข้อมูลการติดต่อ นอกจากนี้เนื่องจากรูปภาพที่มาโดยตรงจากกล้องดิจิทัลนั้นมีขนาดใหญ่มากสำหรับการแสดงผลบนเว็บจึงเป็นความคิดที่ดีที่จะลดขนาดรูปภาพเหล่านั้นผ่าน Save for the web ต่อไป สำหรับผู้ที่ไม่เข้าใจ Photoshop ฉันไม่สงสัยเลยว่ามีแหล่งข้อมูลออนไลน์สำหรับปรับขนาดรูปภาพและดึงข้อมูล EXIF ที่ไม่จำเป็นออกไป

— AlGator
แหล่งที่มา

4

แต่หากคุณกำลังพัฒนาแอพพลิเคชั่นที่ผู้ใช้สามารถเลือกภาพที่จะอัพโหลดได้จะใช้ Photoshop ได้อย่างไร? :)

— บันทึก Lazy

1

ฉันคิดว่ามีปัญหาบางอย่างในการวางแนวภาพแก้ไขเบราว์เซอร์โดยอัตโนมัติตัวอย่างเช่นถ้าฉันไปที่รูปภาพโดยตรงมันจะแสดงการวางแนวที่ถูกต้อง แต่แสดงการวางแนวที่ไม่ถูกต้องในหน้า html ที่ออกบางส่วน

— ไก่โจว
แหล่งที่มา

-19

ใช้การออกแบบภายนอก ในชีต html ให้ชื่อคลาสกับแท็ก ในสไตล์ชีตให้ใช้ตัวดำเนินการ dot นำหน้าด้วยชื่อคลาสแล้วเขียนรหัสต่อไปนี้

.rotate180 {
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 transform: rotate(180deg);
 }

— เอ็มเอส
แหล่งที่มา

มันไม่ใช่ทางออกทั่วไป จะทำงานโดยเฉพาะกับภาพที่มีให้

— th3pirat3