img ট্যাগ ভুল দিকনির্দেশ প্রদর্শন করে

Question

এই লিঙ্কটিতে আমার একটি চিত্র রয়েছে: http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg

আপনি দেখতে পাচ্ছেন যে এটি সঠিক ওরিয়েন্টেশন সহ একটি সাধারণ চিত্র। যাইহোক, আমি যখন আমার ইমেজ ট্যাগের এসআরসি বৈশিষ্ট্যে এই লিঙ্কটি সেট করি তখন চিত্রটি উল্টো হয়ে যায়। http://jsfiddle.net/7j5xJ/

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

আপনার কি ধারণা আছে কি হচ্ছে?

Comments

ফায়ারফক্সে এটি উভয় ক্ষেত্রেই উল্টো। আমি মনে করি এক্সিএফ তথ্যের ভিত্তিতে ক্রোম এটিকে স্বয়ংক্রিয়ভাবে ঘোরানোর জন্য যথেষ্ট স্মার্ট।

— dfsq

হুম সত্যিই? আমার ফায়ারফক্সে, মূলটি এখনও সাধারণ এবং img এর চিত্রটি উল্টো দিকে।

— অলস লগ

আমি মনে করি চিত্রটি নিজেই উল্টো হয়ে গেছে এবং cloudfrontএটি পৃষ্ঠাতে আবর্তিত হতে পারে। আপনি CSS jsfiddle.net/7j5xJ/1 এর

— কেভিন লিঞ্চ

regex.info/… এটি Orientation: Rotate 180EXIF এ আছে।

— dfsq

এটি ফটো মেটাডেটা সম্পর্কিত সমস্যা যা ওরিয়েন্টেশন নির্দিষ্ট করে। আমি জানি না কেন চিত্র ট্যাগ এটির জন্য অ্যাকাউন্ট করে না। আমি এখনও কোনও ভাল উত্তর খুঁজে পাইনি ...

— চেট

Answer 1

আমি সমাধানটির একটি অংশ পেয়েছি। চিত্রগুলিতে এখন মেটাডেটা রয়েছে যা ছবির ওরিয়েন্টেশন নির্দিষ্ট করে। এর জন্য একটি নতুন সিএসএস স্পেস রয়েছেimage-orientation ।

এটি কেবল আপনার সিএসএসে যুক্ত করুন:

img {
    image-orientation: from-image;
}

জানুয়ারী 25, 2016 হিসাবে অনুমান অনুসারে, ফায়ারফক্স এবং আইওএস সাফারি (একটি উপসর্গের পিছনে) একমাত্র ব্রাউজার যা এটি সমর্থন করে। আমি এখনও সাফারি এবং ক্রোমের সাথে সমস্যাগুলি দেখছি। যাইহোক, মোবাইল সাফারি সিএসএস ট্যাগ ছাড়াই স্থানীয়ভাবে ওরিয়েন্টেশন সমর্থন করে বলে মনে হচ্ছে।

আমি মনে করি আমাদের অপেক্ষা করতে হবে এবং দেখতে হবে ব্রাউজারগুলি সমর্থন করা শুরু করে কিনা image-orientation।

Comments

আশ্চর্যজনকভাবে আমি পরীক্ষা করেছি ব্রাউজারগুলি (তাদের সাম্প্রতিক অবতারে ম্যাকের উপর সাফারি, ক্রোম এবং ফায়ারফক্স) পতাকাটি সঠিকভাবে পরিচালনা করে যখন চিত্রটি চারপাশের কোনও HTML ছাড়াই সরাসরি প্রদর্শিত হয়।

— 27

এটি পরীক্ষামূলক হিসাবে এটি যত্নশীল। ব্রাউজারের সামঞ্জস্যতা পরীক্ষা করে দেখুন এটি বেশিরভাগ ব্রাউজারের জন্য ভাল লাগে না। আশা করি তারা এটিকে কোনও পর্যায়ে বাছাই করবে।

— নভেম্বর '15

আজকের বেশিরভাগ

— গ্যাব্রিয়েল সি

বিশ্বে কেন চিত্রগুলি এমনকি ওরিয়েন্টেশন মেটাডেটা থাকে? আপনি যদি সত্যিই ছবিটি ঘোরতে চেয়েছিলেন তবে আপনি কেবল পিক্সেল ঘুরিয়ে দিয়ে উচ্চতার প্রশস্ততা বদল করতে পারবেন না?

— জ্যাক গিফিন

এটি এত উপার্জন কিভাবে পেল? এটি অত্যন্ত অসমর্থিত এবং ফায়ারফক্স ক্যানিউজ.com

— একটি বন্ধু

Answer 2

আপনার চিত্রটি আসলে উল্টো দিকে। তবে এর একটি মেটা অ্যাট্রিবিউট রয়েছে "ওরিয়েন্টেশন" যা দর্শকদের বলে যে এটি ঘোরানো 180 ডিগ্রি হওয়া উচিত। কিছু ডিভাইস / দর্শক এই নিয়মটি মানেন না।

এটি ক্রোমে খুলুন: সঠিক উপায়ে এফএফ এ খুলুন: সঠিক উপায়ে এটি আইইতে খুলুন: উল্টো দিকে

এটিকে পেইন্টে খুলুন: উল্টোদিকে ফটোশপে খুলুন: ডানদিকে। প্রভৃতি

Comments

ব্যবহারকারীদের ছবি আপলোড করার আগে আমরা কীভাবে এগুলি প্রতিরোধ করতে পারি তার কোনও ধারণা আছে? যেহেতু এই চিত্রটি সরাসরি ব্যবহারকারীর দ্বারা আপলোড করা হয়েছে তাই এটি থেকে উত্তরণের জন্য আমার একটি উপায় খুঁজতে হবে

— দ্য অলস লগ

যদি এটি এমন কোনও পরিষেবার জন্য যা চিত্রগুলি হোস্ট করবে তবে আপনি মাত্রা, ফাইলাইজ এবং সুরক্ষার কারণে চিত্রগুলি সর্বোপরি পুনরায় কোডিং করতে চান, সুতরাং এটি পুনরায় কোডিং সংস্করণে এগুলি ঠিক করতে পারে।

— আই-কনিকা

আমি দেখি. এটি পরিচালনা করার জন্য আমার আরও ভাল উপায় খুঁজে নেওয়া দরকার। ছবিটি এস 3

— এ

আপনি পিএইচপি-তে জিডি লাইব্রেরি ব্যবহার করতে পারেন।

— আই-কনিকা

একটি সহজ উপায় হ'ল অরিয়েন্টেশন মেটাডেটা সরিয়ে ছবিটি ফ্লিপ করা। ইমেজম্যাগিক রূপান্তর-স্বতঃসংশ্লিষ্ট ফাংশন সরবরাহ করে যা এটি করবে।

— সৌরভাইটস

Answer 3

যদি আপনার লিনাক্সে অ্যাক্সেস থাকে তবে একটি টার্মিনাল খুলুন, সিডি আপনার চিত্রযুক্ত ডিরেক্টরিতে এবং তারপরে চালান run

mogrify -auto-orient *

এটি সমস্ত চিত্রের স্থিতিকালীন সমস্যাগুলি স্থায়ীভাবে ঠিক করতে হবে।

Comments

এটি আমার জন্য কাজ করেছে, brew install imagemagickআপনি পেলে ম্যাক চালাতে পারেনcommand not found: mogrify

— কাইল

পরবর্তী চিত্র অবধি .. এটির কি কোনও ডাউনসাইড নেই?

— হ্যারি বোশ

Answer 4

আমি এখানে আমার নিজের উত্তর যুক্ত করতে ভুলে গেছি। আমি রুবেলগুলিকে রেলগুলি ব্যবহার করছিলাম যাতে এটি পিএইচপি বা অন্যান্য ফ্রেমওয়ার্কগুলিতে আপনার প্রকল্পগুলির জন্য প্রযোজ্য না হয়। আমার ক্ষেত্রে, আমি ছবিগুলি আপলোড করার জন্য ক্যারিয়ারওয়েভ রত্নটি ব্যবহার করছিলাম। আমার সমাধানটি ছিল ফাইলটি সংরক্ষণের আগে এক্সআইএফ সমস্যা সমাধানের জন্য আপলোডার ক্লাসে নিম্নলিখিত কোডটি যুক্ত করা।

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

পিএনজি হিসাবে আমার জন্য সমস্যা সমাধান করুন।

Comments

এই সমাধানটি কেবল ফটোগ্রাফ নয় এমন চিত্রগুলির জন্য দরকারী: "জেপিজি ফর্ম্যাটটি হ'ল একটি ক্ষতির সংকোচিত ফাইল ফর্ম্যাট। সংকুচিত। একটি ছোট ফাইল আকারে লাইন অঙ্কন, পাঠ্য এবং আইকনিক গ্রাফিক্স সংরক্ষণের জন্য, জিআইএফ বা পিএনজি আরও ভাল পছন্দ কারণ সেগুলি ক্ষয়হীন "" - Labnol.org/software/tutorials/…

— কেসি গিবসন

দুর্দান্ত, সমাধান হওয়া ধন্যবাদ

— টি। শাশ্বত

এটিকে পিএনজি হিসাবে সংরক্ষণ করেছেন, আবার জেপিজিতে ফিরিয়ে দিন যা ফাইলের আকার কম রাখে এবং ওরিয়েন্টেশনটি সঠিকভাবে সংরক্ষণ করে, ধন্যবাদ।

— এমডিভ

Answer 6

এই উত্তরটি এক্সিফ-জেএস ব্যবহার করে বিএসএপির উত্তরের উপর ভিত্তি করে , তবে jQuery এর উপর নির্ভর করে না এবং এমনকি পুরানো ব্রাউজারগুলির সাথে মোটামুটি সামঞ্জস্যপূর্ণ। নীচে এইচটিএমএল এবং জেএস ফাইলগুলির উদাহরণ রয়েছে:

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

আপনি চিত্রের "ওরিয়েন্টেশন" বৈশিষ্ট্যটি পরীক্ষা করতে এক্সিফ-জেএস ব্যবহার করতে পারেন । তারপরে প্রয়োজন অনুযায়ী সিএসএস রূপান্তর প্রয়োগ করুন apply

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

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

Answer 8

এই সমস্যাটি আমাকেও পাগল করে তুলেছিল। আমি আমার সার্ভারে পিএইচপি ব্যবহার করছিলাম তাই আমি @ অলস লগ (রুবি) এবং @ ডেডাইয়েডবি (পাইথন) সমাধানগুলি ব্যবহার করতে পারিনি। তবে এটি আমাকে সঠিক দিকে নির্দেশ করল। আমি ইমেজিকের 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

এটি আপনার স্যামসাং ফোনটি অন্তর্ভুক্ত করে এমন এক্সআইএফ ডেটা।

Comments

আহ, তাই কেবল স্যামসুং ফোন তোলা ছবিগুলির সাথেই এটি ঘটে?

— অলস লগ

বেশ কয়েকটি নিয়ে ঘটে। আমি এটি আইফোনেও দেখেছি।

— DeCoy

এক্সআইএফ মেটাডেটা নিজেই ফটোগ্রাফ সম্পর্কে তথ্য অন্তর্ভুক্ত করতে পারে (শাটার গতি, লেন্স অ্যাপারচার, আইসো সংবেদনশীলতা, ফোকাস দূরত্ব, ইত্যাদি), প্রসঙ্গ তথ্য (তারিখ, সময়, তাপমাত্রা, আর্দ্রতা), এবং জিপিএস স্থানাঙ্ক পাশাপাশি ঘূর্ণন কোণও থাকতে পারে একাধিক 90। আজকের বিশাল স্মার্টফোন এবং ক্যামেরাগুলি এই মেটাডেটাগুলি এক্সআইএফ ব্লকে রাখে তাই আইএমএইচও এটি সময়ের বিষয় যে ব্রাউজারগুলি স্বয়ংক্রিয়ভাবে সঠিক ফ্রেমের ঘূর্ণন প্রয়োগ করে।

— ম্যানুয়েলজে

Answer 10

সিএসএস না হওয়া পর্যন্ত: 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. পেইন্টের মতো চিত্র উইন্ডোতে চিত্র খুলুন (উইন্ডোতে) বা চিত্রম্যাগিক (লিনাক্সে)।

2. চিত্রটি বাম / ডানদিকে ঘোরান।

3. ছবিটি সংরক্ষণ করুন।

এটি স্থায়ীভাবে সমস্যার সমাধান করা উচিত।

Answer 12

সমস্যার সমাধানের সহজ উপায়, কোডিংয়ের সানিং, ওয়েব রফতানির জন্য ফটোশপের সেভ ব্যবহার করা। কথোপকথন বাক্সে একটি বাছাইয়ের চিত্রের সমস্ত বা বেশিরভাগের ডেটা মুছতে পছন্দ করতে পারে। আমি সাধারণত কপিরাইট এবং যোগাযোগের তথ্য রাখি। এছাড়াও, যেহেতু সরাসরি ডিজিটাল ক্যামেরা থেকে আসা চিত্রগুলি ওয়েব প্রদর্শনের জন্য খুব বড় আকারের হয় তবে ওয়েবে সেভের মাধ্যমে সেগুলি হ্রাস করে নেওয়া ভাল ধারণা। যারা ফটোশপ সম্পর্কে জ্ঞান নন তাদের ক্ষেত্রে আমার কোনও সন্দেহ নেই যে কোনও চিত্রের আকার পরিবর্তন এবং এটি অপ্রয়োজনীয় এক্সআইএফ ডেটা ছিনিয়ে নেওয়ার জন্য অনলাইন সংস্থান রয়েছে।

Comments

তবে আপনি যদি এমন কোনও অ্যাপ্লিকেশন বিকাশ করছেন যেখানে ব্যবহারকারীরা আপলোড করার জন্য কোনও চিত্র চয়ন করতে পারেন, সেই ক্ষেত্রে ফটোশপটি কীভাবে ব্যবহার করবেন? :)

— অলস লগ

Answer 13

আমি মনে করি ব্রাউজারের অটো ফিক্স ইমেজ ওরিয়েন্টেশনে কিছু সমস্যা রয়েছে, উদাহরণস্বরূপ, আমি যদি সরাসরি ছবিটি দেখতে যাই তবে এটি সঠিক দিকনির্দেশ দেখায় তবে কিছু প্রস্থানকারী এইচটিএমএল পৃষ্ঠায় ভুল অভিযোজন প্রদর্শন করে।

Answer 14

বাহ্যিক স্টাইলিং ব্যবহার করুন। এইচটিএমএল শীটে ট্যাগটিকে ক্লাসের নাম দিন। স্টাইল শীটে ডট অপারেটরটি ক্লাসের নাম অনুসারে ব্যবহার করুন এবং তারপরে নিম্নলিখিত কোডটি লিখুন

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

Comments

এটি কোনও সাধারণ সমাধান নয়। প্রশ্নে প্রদত্ত চিত্রটিতে বিশেষত কাজ করবে

— th3pirat3