जावास्क्रिप्ट कैनवास के साथ आकार बदलने वाली छवियों को चिकना करना

HTML कैनवास के साथ छवियों का आकार बदलना वेब एप्लिकेशन के भीतर दृश्यों में हेरफेर करने का एक सुविधाजनक तरीका प्रदान करता है। हालाँकि, डिफ़ॉल्ट आकार बदलने वाले एल्गोरिदम के परिणामस्वरूप पिक्सेलयुक्त या दांतेदार छवियां हो सकती हैं, जिसमें छवि संपादन सॉफ़्टवेयर में पाई जाने वाली सहजता का अभाव होता है। इमेज स्मूथिंग तकनीकों को शामिल करके इस समस्या का समाधान किया जा सकता है।

स्मूथनेस प्राप्त करने का एक तरीका है चरणों में स्केलिंग को कम करना। इस विधि में छोटी वृद्धि का उपयोग करके धीरे-धीरे छवि का आकार बदलना शामिल है। उदाहरण के लिए, मूल छवि का आकार सीधे 50% करने के बजाय, आप इसे पहले 75%, फिर 62.5%, और इसी तरह कम कर सकते हैं। यह वृद्धिशील दृष्टिकोण पिक्सेल इंटरपोलेशन के प्रभाव को कम करता है, जिसके परिणामस्वरूप एक आसान परिणाम मिलता है।

var oc = document.createElement('canvas'),
    octx = oc.getContext('2d');

oc.width = img.width * 0.5;
oc.height = img.height * 0.5;
octx.drawImage(img, 0, 0, oc.width, oc.height);

// ...

ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
    0, 0, canvas.width, canvas.height);

दूसरी विधि इमेजस्मूथिंगक्वालिटी प्रॉपर्टी सेट करना है, जो क्रोम जैसे आधुनिक ब्राउज़र में समर्थित है। यह गुण छवि का आकार बदलने के लिए उपयोग किए जाने वाले इंटरपोलेशन एल्गोरिदम को नियंत्रित करता है। इसे "उच्च" पर सेट करके, ब्राउज़र अधिक उन्नत बाइक्यूबिक इंटरपोलेशन विधि पर स्विच कर सकते हैं, जिससे छवि चिकनाई में सुधार हो सकता है।

canvas.getContext('2d', { imageSmoothingQuality: "high" });

चरणों में डाउनस्केलिंग का उपयोग करना या छवि स्मूथिंग गुणवत्ता को समायोजित करना डेवलपर्स को जावास्क्रिप्ट कैनवास के साथ आकार की छवियों की उपस्थिति को बढ़ाने की अनुमति देता है, जिससे दृश्यमान आकर्षक परिणाम मिलते हैं।