कैनवास ड्रा इमेज गुणवत्ता

Question

यहां एक .png छवि (दाईं ओर) है, और कैनवास तत्व है जिसे मैंने छवि को बाईं ओर खींचा है। क्या आप गुणवत्ता अंतर देख सकते हैं? कैनवास छवि को ध्यान देने योग्य गुणवत्ता हानि के साथ प्रस्तुत करता है। हम क्या कर सकते है?

मैंने क्रोम और आईई 9 पर यह परिणाम देखा। अन्य शायद वही काम करेंगे। मैं छवि कैसे प्रस्तुत करना काफी सामान्य है: स्क्रिप्ट में मैं एक नया Image() वस्तु बनाने, के बाद यह भरी हुई हो, तो मुझे फोन
context.drawImage(myimage, x, y);

संपादित करें:

यह प्रारंभिक छवि है मैंने कैनवास पर देखा:

और यहां कैनवा क्या है रों renders के बाद मैं ने लिखा है:
context.drawImage(myimage,parseInt(x),parseInt(y));

मैं क्या कह सकता, महान जवाब आदमी। अपने सर्वश्रेष्ठ पर Sharpshooting। टोपी आप के लिए बंद है।

EDIT2:

मुझे लगता है कि पहले एक से भी बदतर है:

मैंने कोशिश की context.drawImage(myimage, parseInt(x) + 0.5, parseInt(y)+ 0.5);, यहाँ परिणाम है। मैंने इसे क्रोम पर देखा, आईई 9 पर यह कुछ हद तक खराब है।

Answer 1

मैंने अभी दोनों छवियों का ओवरले बनाया है ताकि वे एक दूसरे को बेअसर कर सकें। यह काम नहीं किया, मुझे किनारों के साथ कठिनाइयों थी।

कृपया जांच लें कि अपने निर्देशांक x, y पूर्णांक हैं। चल बिन्दु संख्या का उपयोग करते हुए यहाँ अपनी छवि को धुंधला हो सकता है के रूप में कुछ कार्यान्वयन यह

context.drawImage(myimage, parseInt(x), parseInt(y)); 

"पिक्सेल के बीच" रेंडर करने के लिए अगर यह या तो काम नहीं करता है की कोशिश, पूर्णांक मान + 0.5
मैं जानता हूँ कि उपयोग करने का प्रयास ओपनजीएल कार्यान्वयन के लिए, आपको पिक्सेल के केंद्र को हिट करने के लिए 0.5 के साथ निर्देशांक का उपयोग करना होगा।

context.drawImage(myimage, parseInt(x)+0.5, parseInt(y)+0.5); 

---

संपादित करें: HTML5Rocks पर

चेक बाहर this page!

Answer 2

मुझे पता है कि इसका पहले ही उत्तर दिया जा चुका है, लेकिन मैं यहां क्या हो रहा है और क्या किया जा सकता है इसके बारे में बात करने के लिए और जानकारी देना चाहता हूं।

---

इस छवि को समरेखण, जो चूक द्विरेखीय/trilieaner/डिफ़ॉल्ट रूप से कैनवास पर bicubic तरह एल्गोरिदम सम करने के लिए, आप क्या चाहते हैं निकटतम-पड़ोसी के रूप में जाना जाता है, जबकि के कारण है।

विनिर्देश हाल ही में true में कोई प्रॉपर्टी imageSmoothingEnabled कहा जाता है, जो चूक जोड़ा गया है और निर्धारित करता है कि गैर पूर्णांक पर तैयार की छवियों का समन्वय करता है या एक चिकनी एल्गोरिथ्म का उपयोग करेगा बढ़ाया आकर्षित किया है। यदि यह false पर सेट है तो निकटतम पड़ोसी का उपयोग किया जाता है, कम चिकनी छवि का उत्पादन होता है और इसके बजाय केवल बड़े दिखने वाले पिक्सेल बनाते हैं।

छवि smoothing केवल हाल ही में कैनवास विनिर्देश में जोड़ा गया है और सभी ब्राउज़रों द्वारा समर्थित नहीं है, लेकिन कुछ ब्राउज़रों ने इस संपत्ति के विक्रेता-प्रीफिक्स्ड संस्करणों को लागू किया है। संदर्भ में क्रोम और webkitImageSmoothingEnabled फ़ायरफ़ॉक्स में mozImageSmoothingEnabled मौजूद है और इन्हें गलत पर सेट करने से एंटी-एलियासिंग होने से रोक दिया जाएगा। दुर्भाग्य से, लिखने के समय, आईई 9 और ओपेरा ने इस संपत्ति को लागू नहीं किया है, विक्रेता prefixed या अन्यथा।

1. आप कैनवास स्केलिंग रहे हैं, तो आप छवि चौरसाई अक्षम या निकटतम-पड़ोसी प्रक्षेप का उपयोग करके इसे पैमाने पर करने की जरूरत है:

   सामान्य तौर पर आप बस दो नियमों का पालन करने की जरूरत है। इसे मैन्युअल रूप से करने के लिए कुछ एल्गोरिदम हैं और यह वही विकल्प है जो उपरोक्त विकल्प कर रहे हैं।

2. यदि आप पूर्णांक निर्देशांक पर नहीं आ रहे हैं तो आपको एक ही समस्या मिल जाएगी और इसका एक ही समाधान होगा। ऊपर दिए गए विकल्पों आपके ब्राउज़र पर मौजूद नहीं हैं तो आप पूर्णांक पर वापस लौटने की आवश्यकता होगी निर्देशांक (x | 0, y | 0)

कहाँ x | 0 फर्श x जल्दी से, तथापि 2,147,483,647 से बड़ी संख्या में साथ काम नहीं करेंगे: सबसे बड़ा 32 बिट के साइन्ड इंटीजर।

उम्मीद है कि आपके निर्देशांक उस से बड़े नहीं हैं!

Answer 3

मुझे लगता है कि यह link पूरी मदद मिलेगी। मैंने वही किया लेकिन मेरे मामले में मैं जावास्क्रिप्ट का उपयोग करके गतिशील रूप से कैनवास वजन और ऊंचाई देता हूं। तब मैंने इसे घोषित करते समय कैनवास की ऊंचाई और चौड़ाई दी। इससे समस्या हल हो जाती है।