ज़ूम इन होने पर Chrome को छोटी छवियों को धुंधला होने से कैसे रोकें?

13

जब मैं पिक्सेल आर्ट को करीब से देखने की कोशिश कर रहा हूं, तो क्रोम छवि को धुंधला करना शुरू कर देता है। मैं इसे बनाना चाहता हूं ताकि जब छवि को ज़ूम इन किया जाए, तब भी मैं पिक्सेल को कुरकुरा विस्तार से देख सकता हूं, धुंधला नहीं।

google-chrome images pixels

— प्रोपेलर
स्रोत

1

फिलहाल मुझे नहीं लगता कि आप उस स्मूथिंग एल्गोरिथम को निष्क्रिय कर सकते हैं जो क्रोम उन छवियों के किनारों को सुचारू करता है जब आप उन्हें ज़ूम इन करते हैं। जब तक कि ऐसा कोई एक्सटेंशन न हो जो कोई ऐसा करता है या कोई ऐसा व्यक्ति जानता है जिसे मैं अभी तक नहीं जानता हूं।

— डक डक्यूजोस

ज़ूम करने से क्या आपका मतलब है ctrl / cmd और +?

— बोआओना

@booyas, हाँ, यही मेरा मतलब है।

— प्रोपेलर

1

हालात सुधरे हैं, अब यह stackoverflow.com/questions/7615009/… का एक संभावित डुप्लिकेट है । विशेष रूप से, namsol के उत्तर और jsfiddle को jsfiddle.net/namuol/VAXrL/1459 पर देखें जो दर्शाता है कि मुझे लगता है कि आप चाहते हैं। क्रोम के लिए TL; DR: "इमेज-रेंडरिंग: पिक्सेलेटेड;" img और कैनवास तत्वों पर।

— डॉन हैच

आपका प्रश्न नहीं, लेकिन क्या यह संभव है कि छवियों को कम से कम उच्च गुणवत्ता में संग्रहीत किया जाए, और फिर ज़ूम अतिरिक्त विस्तार का उपयोग करेगा?

— Xonatron

16

अपडेट करें

टिप्पणियों के अनुसार:

फ़ायरफ़ॉक्स में अब यह संभव है: छवि-प्रतिपादन: ऑप्टिमसपेड; - अरनौद

मूल

यह सीधे ब्राउज़र से संभव नहीं है।

स्मूथिंग को एक एल्गोरिथ्म के माध्यम से लागू किया जाता है और अधिकांश आधुनिक ब्राउज़र इसी तरह के होते हैं और IE, फ़ायरफ़ॉक्स और क्रोम में इसे बंद करने का कोई तरीका नहीं है।

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

आपके पास अन्य विकल्प हैं, यहां ऊपर दिए गए लिंक से 2 मुख्य बिंदु हैं, दोनों क्रोम एडन हैं।

इमेज-
रिसाइज़र imagezoom

आप ब्राउज़र में नीचे CSS कोड लागू कर सकते हैं , जो इसे बंद कर देगा!

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+                */
    }

— डेव
स्रोत

दुर्भाग्य से यह क्रोम (OSX को छोड़कर) पर काम नहीं करता है।

— लैपो

Chrome में इसे कैसे / कहाँ पर मुझे 'लागू' करना होगा?

— Nyerguds

4

क्या आपने अभी कहा है कि यह संभव नहीं है और फिर वास्तव में ऐसा करने के लिए एक कार्य कोड चिपकाया है?

— पेट्र पेलर

नहीं @petrpeller, मैंने स्पष्ट रूप से लिखा है कि यह सीधे ब्राउज़र के साथ संभव नहीं है। मैं फिर समझाता हूं कि एक प्लगइन की आवश्यकता है ... जब आप पोस्ट पढ़ सकते हैं तो आप यह सवाल क्यों पूछ रहे हैं?!?

— डेव

2

image-rendering: -webkit-optimize-contrast;क्रोम में काम कर रहे

— wp के छात्र

2

मैंने छवियों के साथ GPU प्रतिपादन का उपयोग करते समय क्रोम और फ़ायरफ़ॉक्स के साथ कुछ मुद्दों पर ध्यान दिया है। उदाहरण के लिए:

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

यदि आपके पास निम्नलिखित के साथ कोई सीएसएस स्टेटमेंट हैं, तो उन्हें हटाने का प्रयास करें और देखें कि क्या आपकी छवि की गुणवत्ता बढ़ जाती है।

— bashaus
स्रोत

2

स्मूथिंग को डिसेबल करने के लिए मैंने यह बुकमार्कलेट बनाया। मैं अपने बुकमार्क बार में लिंक रखता हूँ और इसे तब टैप करता हूँ जब मैं किसी पृष्ठ पर आमतौर पर पिक्सेल कला या क्लासिक गेमिंग के लिए एंटीअलियासिंग को निष्क्रिय करना चाहता हूँ :

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

एक बुकमार्कलेट अपील करने का कारण यह था कि मुझे उन वेबसाइटों पर "अपने सभी डेटा को पढ़ने और बदलने की अनुमति नहीं है, जो आप अनुमति देते हैं"।

— स्टीफन Niedzielski
स्रोत

1

निम्नलिखित सीएसएस के साथ 2019 में संभव: image-rendering: pixelated;

— अरनॉड
स्रोत