HTML कैनवास में पिक्सेल डेटा तक पहुंच

क्या HTML कैनवास ऑब्जेक्ट के भीतर किसी विशिष्ट पिक्सेल का रंग पुनः प्राप्त करना संभव है? हां, आप कैनवस एपीआई द्वारा प्रदान किए गए विभिन्न तरीकों का उपयोग करके HTML कैनवास में पिक्सेल डेटा तक पहुंच और हेरफेर कर सकते हैं। कैनवास के भीतर एक विशिष्ट स्थान के लिए, आप getImageData() विधि का उपयोग कर सकते हैं। यह विधि एक ImageData ऑब्जेक्ट लौटाती है जो कैनवास के एक हिस्से का प्रतिनिधित्व करती है। ImageData ऑब्जेक्ट में पिक्सेल डेटा की एक सरणी होती है जिसे आप .data प्रॉपर्टी का उपयोग करके एक्सेस कर सकते हैं। यह इच्छानुसार. उदाहरण के लिए, आप प्रत्येक पिक्सेल को ग्रे शेड में परिवर्तित करके एक ग्रेस्केल छवि बना सकते हैं:

// दिए गए निर्देशांक और आयामों से CanvasPixelArray प्राप्त करें। var imgd = context.getImageData(x, y, चौड़ाई, ऊंचाई); var पिक्स = imgd.data; // प्रत्येक पिक्सेल पर लूप करें और इसे ग्रेस्केल में बदलें। के लिए (var i = 0, n = pix.length; i getImageData() और putImageData() विधियों का लाभ उठाकर, आप विभिन्न पिक्सेल हेरफेर कार्य कर सकते हैं, जैसे छवि फ़िल्टरिंग, रंग समायोजन और HTML पर प्रभाव बनाना कैनवास.