HTML5 कैनवास छवि का आकार बदलना (डाउनस्केल) उच्च गुणवत्ता के साथ

HTML5 कैनवास का उपयोग करके ब्राउज़र में छवियों का आकार बदलने से खराब गुणवत्ता हो सकती है, खासकर जब घटाव। यह आलेख समस्या की जांच करता है और डाउनस्केलिंग के दौरान इष्टतम गुणवत्ता प्राप्त करने के लिए एक समाधान प्रदान करता है। इंटरपोलेशन और छवि स्मूथिंग को अक्षम करने के लिए गुण:

छवि-प्रतिपादन: optimQuality; छवि-प्रतिपादन: -मोज़-कुरकुरा-किनारे; छवि-प्रतिपादन: -वेबकिट-ऑप्टिमाइज़-कंट्रास्ट; छवि-प्रतिपादन: अनुकूलन-विपरीत; -एमएस-इंटरपोलेशन-मोड: निकटतम-पड़ोसी;हालाँकि, ये गुण सीधे तौर पर डाउनस्केलिंग गुणवत्ता को प्रभावित नहीं करते हैं। इंटरपोलेशन और स्मूथिंग का संबंध नए पिक्सेल बनाने से है, जो छवि आकार को कम करते समय प्रासंगिक नहीं है। इंटरपोलेशन के बजाय डाउनसैंपलिंग के लिए।

डाउनसैंपलिंग में, ब्राउज़र आमतौर पर एक सरल विधि का उपयोग करते हैं जहां वे गंतव्य छवि में प्रत्येक पिक्सेल के लिए स्रोत छवि से एक एकल पिक्सेल का चयन करते हैं। इसके परिणामस्वरूप विवरण और शोर का नुकसान हो सकता है।

image-rendering: optimizeQuality;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;

इस समस्या को हल करने के लिए, हमें एक पिक्सेल-परफेक्ट डाउनसैंपलिंग एल्गोरिदम की आवश्यकता है जो सभी स्रोतों को लेता है खाते में पिक्सेल. प्रदान किया गया कोड स्निपेट ऐसे एल्गोरिदम का एक उदाहरण है:functiondownScaleCanvas(cv,scale) { // स्रोत छवि में सभी पिक्सेल को संसाधित करें के लिए (sy = 0; sy

यह एल्गोरिदम प्रत्येक स्रोत पिक्सेल के एक, दो, या चार गंतव्य पिक्सेल के योगदान की गणना करता है, यह सुनिश्चित करता है कि डाउनस्केलिंग के दौरान सभी विवरण संरक्षित हैं।

कई चरणों में डाउनस्केलिंग करने से छवि में धुंधलापन बढ़ सकता है। ऐसा इसलिए है क्योंकि क्रमिक डाउनस्केलिंग ऑपरेशनों से संचयी राउंडिंग त्रुटियों के परिणामस्वरूप अधिक शोर होता है। उदाहरण छवियाँ. यह कई डाउनस्केलिंग चरणों के साथ भी तीक्ष्णता बनाए रखने और शोर को कम करने के बीच संतुलन हासिल करता है।