में निकटतम पड़ोसी प्रतिपादन मेरे पास एक स्प्राइट है जो स्प्राइट शीट का उपयोग करके एनिमेट करता है। वह केवल 16x16 है, लेकिन मैं उसे अपने सभी पिक्सेल-वाई भलाई में लगभग 64x64 तक स्केल करना चाहता हूं!कैनवास
alt text http://i30.tinypic.com/2nu243.jpg
परिणाम भयानक हैं, बेशक ब्राउज़र विरोधी aliasing यह है। :/
धन्यवाद!
यदि कोई इस बार फिर से (मेरे जैसे) पर ठोकर खाता है, तो वेबकिट -webkit-optimize-contrastimage-rendering के लिए मान का समर्थन करता है, जो (वर्तमान में) निकटतम पड़ोसी upscaling का कार्यान्वयन है। इसे छवियों और कैनवास दोनों पर लागू किया जा सकता है।
यहां यह एक उदाहरण है कि यह कैसा चल रहा है।
.nn128 {
width: 128px;
height: 128px;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
}
<canvas class="nn128" width="16" height="16"></canvas>
<img src="path/to/small/image.png" alt="Small image" class="nn128">
, दोनों
वेबकिट
सफारी और छिपकली/फ़ायरफ़ॉक्स निकटतम पड़ोसी एल्गोरिथ्म के साथ 16x16 कैनवास अंतरिक्ष और 128x128 के लिए छोटे छवि बढ़ाना होगा।
अद्यतन जवाब शुरू में कहा गया है कि वेबकिट ब्राउज़रों इस का समर्थन किया; वास्तव में, 2011-12-24 तक, यह मैक ओएस पर मैक ओएस और क्रोम पर क्रोम के साथ काम करता है, लेकिन क्रोम एक विंडोज़ (विंडोज़ पर सफारी सत्यापित नहीं किया गया था) के साथ नहीं, जैसा कि Issue 106662 of the Chromium bug tracker पर बताया गया है। विशेष रूप से, विंडोज़ पर क्रोम एक सीएसएस स्टाइल शीट में -webkit-optimize-contrast मान स्वीकार करेगा, लेकिन इसका कोई प्रभाव नहीं पड़ेगा। यह मेरी उम्मीद है कि यह किसी दिन काम करेगी, और यह विधि निकटतम पड़ोसी upscaling पाने का सही तरीका होगा, लेकिन अभी के लिए, इस विधि का उपयोग करने का मतलब है कि विंडोज क्रोम उपयोगकर्ताओं को अस्पष्टता के साथ रहना होगा।
क्या कोई तरीका है कि आप नमूना प्रदान कर सकते हैं? मुझे पता है कि यह बहुत सीधे आगे है ... लेकिन मैं अभी भी वास्तव में इसकी सराहना करता हूं। – DevEarley
@ ओकिडोक, बस यही किया। – zneak
यह 30 सितंबर 2011 के रूप में काम नहीं कर रहा है। मैं क्रोम 14.0 का उपयोग कर रहा हूं और '-webkit-optimize-contrast' स्पष्ट रूप से छवियों को अलग करने के तरीके को बदलने के लिए कुछ भी नहीं करता है। यह * छवि-प्रतिपादन के लिए मान स्वीकार करता है इसलिए समर्थन का कुछ स्तर होना चाहिए; शायद यह टूट गया है? – namuol
Firefox में आप इस का उपयोग कर सकते हैं:
canvas {
image-rendering: -moz-crisp-edges;
}
लेकिन जहाँ तक मैं हर दूसरे ब्राउज़र के लिए पता है के रूप में आप भाग्य से बाहर काफी हैं। इसके आस-पास एक तरीका शायद आपके स्प्राइट को फ़ोटोशॉप (या जो कुछ भी) में 64x64 तक स्केल करना है, फिर इसे कैनवास में स्केल कर दें। इस तरह कम से कम छवि "स्केल अप" होने पर धुंधली नहीं होगी। यह अभी भी आपको शुद्ध मोड 7 नहीं देगा, हालांकि निकटतम पड़ोसी की भलाई की तरह।
आप छविडेटा ऑब्जेक्ट का उपयोग करके अपना स्केलिंग कोड लिख सकते हैं। ऐसा करने में आप एक महत्वपूर्ण प्रदर्शन जुर्माना लगाएंगे, लेकिन 16x16 छवि के लिए, यह महत्वपूर्ण नहीं हो सकता है।
[इस सवाल] का मेरा जवाब भी देखें (http://stackoverflow.com/questions/4875850/how-to-create-a-pixelized-svg-image-from-a-bitmap/4879849) जो दिखाता है कि कैसे प्रत्येक ब्राउज़र पर निकटतम-पड़ोसी का उपयोग करने के लिए जावास्क्रिप्ट + कैनवास का उपयोग करने के लिए। – Phrogz
उपर्युक्त टिप्पणी में जोड़ा गया उत्तर अधिक पूर्ण – sfridman