জুম ইন করার সময় ক্রোম কীভাবে ছোট চিত্রগুলি অস্পষ্ট করা থেকে রোধ করবে?

Question

আমি যখন পিক্সেল আর্টটি খুব কাছাকাছি দেখার চেষ্টা করছি, ক্রোম চিত্রটি অস্পষ্ট করতে শুরু করে। আমি এটি তৈরি করতে চাই যাতে চিত্রটি জুম করা অবস্থায়ও, আমি এখনও পিক্সেলগুলি খাঁটি বিশদে দেখতে পাচ্ছি, অস্পষ্ট নয়।

Comments

এই মুহুর্তে আমি মনে করি না আপনি ক্রোম ব্যবহার করেন এমন স্মুথিং অ্যালগরিদমটি অক্ষম করতে পারবেন যা আপনি যখন জুম করবেন তখন চিত্রগুলির প্রান্তগুলি মসৃণ করে। যদি না থাকে এমন কোনও এক্সটেনশান না ঘটে বা কেউ এমন কিছু জানে যা আমি এখনও জানিনা।

— ডাকডাকগুজ

জুম করে আপনি কি সিটিআরএল / সেন্টিমিটার এবং +?

— বুয়া

@ বুয়াস, হ্যাঁ, এটাই আমার অর্থ।

— প্রচারকারী

জিনিসগুলির উন্নতি হয়েছে, এখন এটি স্ট্যাকওভারফ্লো / কোয়েশনস / 7615009/ … এর সম্ভাব্য সদৃশ । বিশেষত, jsfiddle.net/namuol/VAXrL/1459 এ নমুলির উত্তর এবং jsfiddle দেখুন যা আপনাকে কী চাইছে তা প্রমাণ করে। ক্রোমের জন্য টিএল; ডিআর: "চিত্র-উপস্থাপনা: পিক্সেলিটেড;" আইএমজি এবং ক্যানভাস উপাদানগুলিতে।

— ডন হ্যাচ

আপনার প্রশ্ন নয়, তবে কি কমপক্ষে কমপক্ষে চিত্রগুলি উচ্চতর মানের মধ্যে সংরক্ষণ করা সম্ভব এবং তারপরে জুম অতিরিক্ত বিবরণ ব্যবহার করবে?

— জোনাট্রন

Answer 1

হালনাগাদ

মতামত অনুসারে:

এটি এখন ফায়ারফক্সে সম্ভব: চিত্র-উপস্থাপনা: অনুকূলিতকরণ; - আরনাউড

মূল

এটি সরাসরি ব্রাউজার থেকে সম্ভব নয়।

স্মুথিংটি একটি অ্যালগরিদমের মাধ্যমে প্রয়োগ করা হয় এবং বেশিরভাগ আধুনিক ব্রাউজারগুলি একই কাজ করে এবং আইই, ফায়ারফক্স এবং ক্রোমে এটি বন্ধ করার কোনও উপায় নেই।

http://productforums.google.com/forum/#!topic/chrome/AIihdmfPNvE

আপনার কাছে অন্য বিকল্প রয়েছে, উপরের লিঙ্কটি থেকে এখানে দুটি প্রধান পয়েন্ট রয়েছে, উভয়ই ক্রোম অ্যাডোনস।

ইমেজ-
রাইজার ইমেজজুম

আপনি নীচে ব্রাউজারে সিএসএস কোড প্রয়োগ করতে পারেন , এটি এটি বন্ধ করে দেবে!

img { 
    image-rendering: optimizeSpeed;             /*                     */
    image-rendering: -moz-crisp-edges;          /* Firefox             */
    image-rendering: -o-crisp-edges;            /* Opera               */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
    image-rendering: pixelated;                 /* Chrome as of 2019   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                */
    }

Comments

দুর্ভাগ্যক্রমে এটি ক্রোমে কাজ করে না (ওএসএক্স বাদে)।

— lapo

কীভাবে / কোথায় আমার Chrome এ 'প্রয়োগ' করতে হবে?

— নাইয়ারগডস

আপনি কি কেবল বলেছেন যে এটি সম্ভব নয় এবং তারপরে বাস্তবে এটি করার জন্য একটি ওয়ার্কিং কোড পেস্ট করেছেন?

— পেট্র পেলার

@ পেপারপেলার নেই, আমি স্পষ্টভাবে লিখেছি এটি সরাসরি ব্রাউজারের মাধ্যমে সম্ভব নয়। আমি তারপরে ব্যাখ্যা করতে যাচ্ছি যে একটি প্লাগইন প্রয়োজন ... আপনি যখন পোস্টটি পড়তে পারেন তখন কেন আপনি এই প্রশ্নটি করছেন?!?!

— ডেভ

image-rendering: -webkit-optimize-contrast;ক্রোমে কাজ করছেন

— ডাব্লুপিপি শিক্ষার্থী

Answer 2

চিত্রগুলির সাথে জিপিইউ রেন্ডারিংয়ের সময় আমি Chrome এবং ফায়ারফক্সের সাথে কিছু সমস্যা লক্ষ্য করেছি। উদাহরণ:

img {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

নিম্নলিখিতগুলির সাথে যদি আপনার কোনও সিএসএস বিবৃতি থাকে তবে সেগুলি সরিয়ে দেওয়ার চেষ্টা করুন এবং দেখুন আপনার চিত্রের গুণমান বৃদ্ধি পায় কিনা।

Answer 3

স্মুথিং অক্ষম করতে আমি এই বুকমার্কলেটটি তৈরি করেছি। আমি লিংকটি আমার বুকমার্ক বারে রাখি এবং যখন আমি কোনও পৃষ্ঠায় অ্যান্টিয়ালাইজিংটি অক্ষম করতে চাই তখন তা ট্যাপ করি, সাধারণত পিক্সেল আর্ট বা ক্লাসিক গেমিংয়ের জন্য :

javascript:(function pixelate() {
  const sheet = document.createElement('style');
  sheet.innerHTML = 'img { image-rendering: pixelated; }';

  document.head.appendChild(sheet);

  for(let i = 0; i < frames.length; ++i) {
    frames[i].document.head.appendChild(sheet);
  }
})()

বুকমার্কলেটের আবেদন করার কারণটি হ'ল আমি এক্সটেনশানগুলিকে "আপনি যে ওয়েবসাইটগুলিতে ভিজিট করেন সেগুলিতে আপনার সমস্ত ডেটা পড়ুন এবং পরিবর্তন করুন" অনুমতি দেওয়া পছন্দ করেন না।

Answer 4

নিম্নলিখিত সিএসএস সহ 2019 সালে সম্ভব: image-rendering: pixelated;