img टैग गलत अभिविन्यास प्रदर्शित करता है

Question

इस लिंक पर मेरी एक छवि है: http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg

जैसा कि आप देख सकते हैं, यह सही अभिविन्यास के साथ एक सामान्य छवि है। हालाँकि, जब मैंने इस लिंक को अपने इमेज टैग की src विशेषता के लिए सेट किया, तो छवि उलटी हो जाती है। http://jsfiddle.net/7j5xJ/

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

क्या आपको पता है कि क्या चल रहा है?

Comments

फ़ायरफ़ॉक्स में यह दोनों मामलों में उल्टा है। मुझे लगता है कि EXIF ​​जानकारी के आधार पर क्रोम इसे स्वचालित रूप से घुमाने के लिए पर्याप्त स्मार्ट है।

— 15

हम्म सच में? मेरे फ़ायरफ़ॉक्स में, मूल अभी भी सामान्य है और img में छवि उलटी है।

— आलसी लॉग

मुझे लगता है कि छवि स्वयं उलटी है और cloudfrontइसे पृष्ठ में घुमाया जा सकता है। आप CSS jsfiddle.net/7j5xJ/1 के

— केविन लिंच

regex.info/… यह Orientation: Rotate 180EXIF में है।

— dfsq

यह फोटो मेटाडेटा के साथ एक समस्या है जो अभिविन्यास को निर्दिष्ट करती है। मैं नहीं जानता कि क्यों छवि टैग इसके लिए खाता नहीं है। मुझे अभी तक कोई अच्छा जवाब नहीं मिला ...

— Chet

Answer 1

मुझे समाधान का हिस्सा मिला। अब छवियों में मेटाडेटा है जो फोटो के उन्मुखीकरण को निर्दिष्ट करता है। के लिए एक नया सीएसएस कल्पना हैimage-orientation ।

बस इसे अपने सीएसएस में जोड़ें:

img {
    image-orientation: from-image;
}

जनवरी 25 2016 के अनुसार, फ़ायरफ़ॉक्स और आईओएस सफारी (एक उपसर्ग के पीछे) एकमात्र ब्राउज़र हैं जो इसका समर्थन करते हैं। मैं अभी भी सफारी और क्रोम के साथ मुद्दों को देख रहा हूं। हालांकि, मोबाइल सफारी सीएसएस टैग के बिना मूल रूप से समर्थन अभिविन्यास के लिए लगता है।

मुझे लगता है कि हमें इंतजार करना होगा और देखना होगा कि ब्राउज़र की इच्छाएं समर्थन करना शुरू करती हैं या नहीं image-orientation।

Comments

अजीब तरह के ब्राउज़रों का मैंने परीक्षण किया (सफारी, क्रोम और फ़ायरफ़ॉक्स मैक पर उनके हाल के अवतारों में) ठीक से ध्वज को संभालते हैं जब छवि सीधे उसके चारों ओर बिना किसी HTML के प्रदर्शित होती है।

— अं ०

प्रायोगिक तौर पर इसके साथ सावधानी बरतें। ब्राउज़र संगतता की जाँच करें यह अधिकांश ब्राउज़रों के लिए अच्छा नहीं लगता है। उम्मीद है कि वे इसे किसी बिंदु पर सुलझा लेंगे।

— खोया

आज के अधिकांश ब्राउज़रों के साथ यह संगत नहीं है। caniuse.com/#search=image-orientation

— Gabriel C

क्यों दुनिया में छवियों को भी उन्मुखता मेटाडेटा है? यदि आप वास्तव में चित्र को घुमाना चाहते थे तो क्या आप पिक्सल्स के चारों ओर शिफ्ट नहीं होंगे और ऊँचाई के लिए चौड़ाई स्वैप करेंगे?

— जैक गिफिन

यह कैसे इतने सारे अपवित्र हो गए हैं? यह बहुत असमर्थित है और फ़ायरफ़ॉक्स caniuse.com/#search=image-orientation

— A Friend

Answer 2

आपकी छवि वास्तव में उलटी है। लेकिन इसमें एक मेटा विशेषता "ओरिएंटेशन" है जो दर्शकों को बताती है कि इसे 180 डिग्री घुमाया जाना चाहिए। कुछ उपकरण / दर्शक इस नियम का पालन नहीं करते हैं।

इसे क्रोम में खोलें: राइट अप अप इसे एफएफ में खोलें: राइट अप अप इसे आईई में खोलें: उल्टा

इसे पेंट में खोलें: उल्टा इसे फोटोशॉप में खोलें: राइट अप अप। आदि।

Comments

क्या आपके पास कोई विचार है कि हम उपयोगकर्ता को छवि अपलोड करने से पहले कैसे रोक सकते हैं? जैसा कि यह चित्र उपयोगकर्ता द्वारा सीधे अपलोड किया गया है, इसलिए मुझे इसे दूर करने का एक तरीका खोजने की आवश्यकता है

— The Lazy Log

यदि यह एक ऐसी सेवा के लिए है जो छवियों की मेजबानी करेगा, तो आप डिमेशन, फ़ाइलों और सुरक्षा कारणों से, वैसे भी छवियों को सर्वश्रेष्ठ रूप से पुनः साझा करेंगे, इसलिए यह उन्हें पुन: लोड किए गए संस्करण में ठीक कर सकता है।

— i-CONICA

समझा। मुझे इसे संभालने के लिए एक बेहतर तरीका खोजने की आवश्यकता होगी। शायद मुझे छवि को संसाधित करने की आवश्यकता है क्योंकि इसे S3

— Lazy Log

आप PHP में GD लाइब्रेरी का उपयोग कर सकते हैं।

— i-CONICA

ओरिएंटेड मेटाडेटा को हटाने और छवि को फ्लिप करने का एक सरल तरीका होगा। Imagemagick कन्वर्ट -autoorient फ़ंक्शन प्रदान करता है जो यह करेगा।

— २27

Answer 3

यदि आपके पास लिनक्स तक पहुंच है, तो अपनी छवियों से युक्त निर्देशिका के लिए एक टर्मिनल, सीडी खोलें और फिर चलाएं

mogrify -auto-orient *

यह सभी छवियों पर उन्मुखीकरण मुद्दों को स्थायी रूप से ठीक करना चाहिए।

Comments

यह मेरे लिए काम करता है, brew install imagemagickअगर आपको मिल जाए तो आपको मैक पर चलने की आवश्यकता हो सकती हैcommand not found: mogrify

— काइल

अगली छवि तक .. क्या इसमें कोई गिरावट है?

— हैरी बोश

Answer 4

मैं यहाँ अपना जवाब जोड़ना भूल गया। मैं रूबी ऑन रेल्स का उपयोग कर रहा था ताकि यह PHP या अन्य फ्रेमवर्क में आपकी परियोजनाओं पर लागू न हो। मेरे मामले में, मैं छवियों को अपलोड करने के लिए कैरियरव्यू रत्न का उपयोग कर रहा था। मेरा समाधान फ़ाइल को सहेजने से पहले EXIF ​​समस्या को ठीक करने के लिए अपलोडर वर्ग में निम्नलिखित कोड जोड़ना था।

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

Comments

अच्छा जवाब लेकिन मैं मौजूदा छवि फ़ाइल पर इस विधि को कैसे कह सकता हूं?

— मैट्रिक्स

आपको संस्करणों को फिर से बनाना होगा। मुझे लगता है कि कुछ इस तरह काम करेगा: stackoverflow.com/a/9065832/461640

— आलसी लॉग

Answer 5

png के रूप में सहेजें मेरे लिए समस्या हल हो गई।

Comments

यह समाधान केवल उन छवियों के लिए उपयोगी है जो तस्वीरें नहीं हैं: "जेपीजी प्रारूप एक हानिपूर्ण संपीड़ित फ़ाइल स्वरूप है। यह एक बीएमपी की तुलना में छोटे आकार में तस्वीरों को संग्रहीत करने के लिए उपयोगी बनाता है। जेपीजी वेब पर उपयोग के लिए एक सामान्य विकल्प है क्योंकि यह। संकुचित। छोटे फ़ाइल आकार में रेखा चित्र, पाठ और प्रतिष्ठित ग्राफिक्स संग्रहीत करने के लिए, GIF या PNG बेहतर विकल्प हैं क्योंकि वे दोषरहित हैं। " - labnol.org/software/tutorials/…

— Kc गिब्सन

भयानक, हल किया धन्यवाद

— टी। शशवत

इसे PNG के रूप में सहेजा गया, फिर JPG पर वापस लौटा जिसने फ़ाइल का आकार कम रखा और ओरिएंटेशन को सही ढंग से सहेजा, धन्यवाद।

— एमडीवे

Answer 6

यह उत्तर Exif-JS का उपयोग करके bsap के उत्तर पर बनाता है , लेकिन 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";
            }
        });
};

Comments

exif-js अब इतना पुराना और अप्रयुक्त है कि यह कुछ वातावरण में विफल रहता है, जैसे कि कहीं भी जहां सख्त मोड सक्षम है। हमें वास्तव में इसके लिए एक समाधान की आवश्यकता है। मेरा ऐप मुझसे बाहर बकवास कर रहा है और मैंने जो भी काम किया है उसके बारे में पर्याप्त जानकारी मिली है।

— मेथोडियन

Answer 7

आप छवि के "ओरिएंटेशन" संपत्ति की जांच करने के लिए, Exif-JS का उपयोग कर सकते हैं । फिर आवश्यकतानुसार एक सीएसएस परिवर्तन लागू करें।

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

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

Answer 8

यह समस्या मुझे पागल कर रही थी। मैं अपने सर्वर की ओर PHP का उपयोग कर रहा था, इसलिए मैं @ Lazy Log (माणिक) और @deweydb (अजगर) समाधानों का उपयोग करने में सक्षम नहीं था। हालाँकि इसने मुझे सही दिशा की ओर इशारा किया। मैंने इमेजिक के 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

Answer 9

यह EXIF ​​डेटा है जिसे आपका सैमसंग फोन शामिल करता है।

Comments

आह, तो यह केवल सैमसंग फोन द्वारा ली गई छवियों के साथ होता है?

— आलसी लॉग

कई के साथ होता है। मैंने इसे iPhones पर भी देखा है।

— ट्रेस DeCoy

EXIF मेटाडेटा में फोटोग्राफ (शटर गति, लेंस एपर्चर, आईएसओ संवेदनशीलता, फोकस दूरी, आदि), संदर्भ डेटा (दिनांक, समय, तापमान, आर्द्रता) के बारे में जानकारी शामिल हो सकती है, और इसमें जीपीएस निर्देशांक के साथ-साथ घूर्णन गोल हो सकता है। 90 ° से अधिक तक। आज के स्मार्टफोन और कैमरों के एक विशाल हिस्से ने इन मेटाडेटा को EXIF ​​ब्लॉक में डाल दिया है, इसलिए IMHO यह केवल समय की बात है कि ब्राउज़र सही फ्रेम रोटेशन को स्वचालित रूप से लागू करते हैं।

— मैनुएलजे

Answer 10

जब तक CSS: image-orientation:from-image;अधिक सार्वभौमिक रूप से समर्थित है हम अजगर के साथ एक सर्वर साइड समाधान कर रहे हैं। यहाँ इसका सार है। आप अभिविन्यास के लिए एक्सिफ़ डेटा की जांच करते हैं, फिर छवि को तदनुसार घुमाएं और फिर से सहेजें।

हम क्लाइंट साइड समाधानों पर इस समाधान को पसंद करते हैं क्योंकि इसमें अतिरिक्त लाइब्रेरी क्लाइंट साइड लोड करने की आवश्यकता नहीं होती है, और यह ऑपरेशन केवल फ़ाइल अपलोड पर एक बार होना है।

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)

Answer 11

यह तब होता है जब छवि का मूल अभिविन्यास वैसा नहीं होता जैसा हम छवि दर्शक में देखते हैं। ऐसे मामलों में छवि हमें छवि दर्शक में लंबवत दिखाई देती है लेकिन यह वास्तविक में क्षैतिज होती है।

इसे करने के लिए निम्न कार्य करें:

1. पेंट (विंडो में) या ImageMagick (लिनक्स में) की तरह छवि संपादक में छवि खोलें।

2. छवि को बाएँ / दाएँ घुमाएँ।

3. छवि सहेजें।

यह समस्या को स्थायी रूप से हल करना चाहिए।

Answer 12

समस्या को ठीक करने का एक आसान तरीका, कोडिंग कोडिंग, वेब एक्सपोर्ट फंक्शन के लिए फोटोशॉप के सेव का उपयोग करना है। संवाद बॉक्स में एक छवि के EXIF ​​डेटा के सभी या अधिकांश को हटाने के लिए चुना जा सकता है। मैं आमतौर पर कॉपीराइट और संपर्क जानकारी रखता हूं। इसके अलावा, चूंकि डिजिटल कैमरे से सीधे आने वाली छवियों को वेब डिस्प्ले के लिए बहुत अधिक उपयोग किया जाता है, इसलिए वेब के लिए सेव के माध्यम से उन्हें डाउनसाइज़ करना एक अच्छा विचार है। उन लोगों के लिए जो फ़ोटोशॉप प्रेमी नहीं हैं, मुझे इसमें कोई संदेह नहीं है कि किसी छवि को आकार देने और किसी भी अनावश्यक आईआईएफ डेटा को छीनने के लिए ऑनलाइन संसाधन हैं।

Comments

लेकिन अगर आप एक ऐसा एप्लिकेशन विकसित कर रहे हैं जहां उपयोगकर्ता अपलोड करने के लिए कोई भी छवि चुन सकते हैं, तो उस स्थिति में फ़ोटोशॉप का उपयोग कैसे करें? :)

— आलसी लॉग

Answer 13

मुझे लगता है कि ब्राउज़र ऑटो फिक्स इमेज ओरिएंटेशन में कुछ समस्याएं हैं, उदाहरण के लिए, अगर मैं सीधे चित्र पर जाता हूं, तो यह सही अभिविन्यास दिखाता है, लेकिन कुछ निकास HTML पृष्ठ में गलत अभिविन्यास दिखाता है।

Answer 14

बाहरी स्टाइल का उपयोग करें। HTML शीट में टैग को क्लास का नाम दें। शैली पत्रक के उपयोग में डॉट ऑपरेटर वर्ग के नाम से आगे बढ़ा और फिर निम्नलिखित कोड लिखिए

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

Comments

यह एक सामान्यीकृत समाधान नहीं है। विशेष रूप से प्रश्न में प्रदान की गई छवि पर काम करेगा

— th3pirat3