2012-12-20 36 views
18

में अपलोड के दौरान स्वचालित रूप से कैप्चर की गई तस्वीर कैप्चर की गई है। मेरे पास इसका उपयोग करके एक HTML फ़ाइल नियंत्रण है, मैं सर्वर पर फ़ाइल अपलोड करने का प्रयास कर रहा हूं। फ़ाइल नियंत्रण परआईओएस 6.0 या आईफोन

  • क्लिक करें
  • यह होगा फ़ाइल/कैमरा के चयन के लिए स्वचालित रूप से खुला संवाद।
  • मैं कैमरा
  • मैं तस्वीर पर कब्जा कर लिया का चयन करें और बचाने के
  • अब प्रपत्र
  • कैद तस्वीर सर्वर पर सफलतापूर्वक बचाने प्रस्तुत लेकिन यह 90 डिग्री घुमाया जाता है।

यह समस्या केवल आईफोन या आईओएस के साथ है।

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

कृपया मुझे पता है, छवि का स्वत: रोटेशन को रोकने के लिए है, तो कैमरे से कब्जा कर लिया करते हैं।

धन्यवाद, Imdadhusen

+0

मुझे एक ही समस्या हो रही थी, लेकिन इस एसओ थ्रेड पर स्वीकृत उत्तर http://stackoverflow.com/questions/18519160/exif-image-rotation-issue-using-carrierwave-and-rmagick-to-upload- to-s3 मेरे लिए काम किया! – Ali

+0

@imdadhusen क्या आप इस मुद्दे को हल करते हैं? मुझे एक ही समस्या का सामना करना पड़ रहा है। अगर आपने इसे हल किया है तो कृपया यहां उत्तर अपडेट करें। धन्यवाद – harsh4u

उत्तर

28

यह छवियों में EXIF ​​/ TIFF मेटाटैग के साथ कुछ हो सकता था।

इनमें से एक टैग छवि के अभिविन्यास को इंगित करता है। आपके द्वारा सर्वर पर अपलोड की जाने वाली कुछ फ़ोटो (जैसे आईफोन से) में ये टैग हो सकते हैं, अन्य (एक अलग स्रोत/वर्कफ़्लो से) हो सकता है। सर्वर इन टैग को बनाए रख सकता है या नहीं भी हो सकता है, और छवि के सही अभिविन्यास का प्रयास करने के लिए टैग पढ़ सकता है या नहीं भी हो सकता है। इसी प्रकार एक वेब ब्राउज़र इन टैग पर ध्यान दे सकता है या नहीं। यदि आप टैग वाली छवियां अपलोड करते हैं, तो परिणाम निश्चित रूप से अप्रत्याशित होंगे।

यह समस्या यह जानने का एक अच्छा तरीका है कि यह समस्या है 'समस्या' छवि और सर्वर से 'अच्छी' छवि डाउनलोड करना और उनकी तुलना करना। उन्हें पूर्वावलोकन में खोलें और इंस्पेक्टर के दूसरे टैब को चेक करें। कोई भी मेटा-जानकारी वहां प्रदर्शित की जाएगी। देखें कि एक छवि में अभिविन्यास जानकारी है और दूसरा नहीं। यदि न तो मेटा-सूचना प्रदर्शित करता है तो यह काफी संभावना है कि सर्वर इसे पूरी तरह से अलग कर रहा है और इसका उपयोग नहीं कर रहा है, और आप इस उत्तर के बारे में भूल सकते हैं।

इसके अलावा आपको विभिन्न ब्राउज़रों में तुलना करनी चाहिए। कुछ ब्राउज़र इस अभिविन्यास की जानकारी को पढ़ते हैं और तदनुसार छवि को घुमाते हैं, अन्य नहीं।

उदाहरण के लिए, मेरा एक iPhone तस्वीर थी जो पोर्ट्रेट मोड में ले निम्नलिखित मेटाटैग है:

  • पिक्सेल ऊंचाई: 2,448
  • पिक्सेल चौड़ाई: 3,264
  • अभिविन्यास: 6 (घुमाया 90 ° सीसीडब्ल्यू)

देशी बिटमैप उन्मुखीकरण परिदृश्य है।
'ओरिएंटेशन' मेटाटैग छवि पढ़ने के सॉफ्टवेयर को प्रदर्शित करने के लिए चित्र पर घूमने के लिए इंगित करता है।

मेटाटैग का उपयोग (कुछ) छवि सॉफ़्टवेयर द्वारा 'सही ढंग से' चित्र को चित्रित करने के लिए किया जाता है लेकिन अन्य सॉफ़्टवेयर द्वारा अनदेखा किया जाता है जो छवि को परिदृश्य के रूप में प्रदर्शित करेगा।

स्थिति भ्रमित है और इसके लिए कोई स्थापित मानक नहीं है (टैग केवल एक संकेत हैं), इसलिए ऑनलाइन प्रकाशन के लिए छवियों की तैयारी करते समय सबसे सुरक्षित बात यह है कि इन टैग को अलग करना और भौतिक रूप से छवि को सही पर घुमाएं अपलोड करने से पहले बिटमैप अभिविन्यास। यदि आप किसी ऐप के सर्वर पक्ष को लिख रहे हैं तो आप इसे सर्वर पर कर सकते हैं। लेकिन किसी भी अभिविन्यास मेटाटैग के साथ सही BITMAP अभिविन्यास में वेब ब्राउज़र पर छवियों को वितरित करना महत्वपूर्ण है।

यह क्यों है? क्योंकि आज भी विभिन्न ब्राउज़र मेटाटैग के लिए अलग-अलग दृष्टिकोण लेते हैं।

iPhone छवि इस प्रकार मैं सिर्फ प्रदर्शित करता है उल्लेख: एक महान
गूगल क्रोम 24 चित्र
सफारी 6 चित्र
फ़ायरफ़ॉक्स 17 परिदृश्य
ओपेरा 12 परिदृश्य

नहीं मामलों के राज्य!

+2

आपके विस्तार के उत्तर के लिए बहुत बहुत धन्यवाद। जावास्क्रिप्ट या jquery का उपयोग कर क्लाइंट साइड पर मेटा टैग की पहचान करने का कोई तरीका है। – imdadhusen

+0

इसके लिए जावास्क्रिप्ट पुस्तकालय हैं। मुझे exif-js के साथ सफलता मिली है –