खोज…
"संदर्भ.गेटमैजडाटा" का परिचय
Html5 कैनवास आपको कैनवास पर किसी भी पिक्सेल का रंग लाने और बदलने की सुविधा देता है।
आप कैनवस के पिक्सेल हेरफेर का उपयोग इसके लिए कर सकते हैं:
- एक छवि के लिए एक रंग-पिकर बनाएं या रंग-पहिया पर एक रंग का चयन करें।
- धुंधला और किनारे का पता लगाने जैसे जटिल छवि फ़िल्टर बनाएं।
- पिक्सेल स्तर पर छवि के किसी भी भाग को पुन: व्यवस्थित करें (यदि आप एचएसएल का उपयोग करते हैं तो आप महत्वपूर्ण प्रकाश व्यवस्था और संतृप्ति को बनाए रखते हुए एक छवि को फिर से व्यवस्थित कर सकते हैं ताकि परिणाम छवि पर किसी को थप्पड़ पेंट की तरह न दिखे)। नोट: कैनवस में अब ब्लेंड कंपोजिंग है जो कुछ मामलों में एक छवि को पुन: स्थापित भी कर सकता है।
- "नॉकआउट" छवि में किसी व्यक्ति / आइटम के आसपास की पृष्ठभूमि,
- एक छवि का पता लगाने और फ्लडफ़िल भाग के लिए एक पेंट-बकेट टूल बनाएं (जैसे, उपयोगकर्ता द्वारा क्लिक की गई फूल की पंखुड़ी का रंग हरे से पीले में बदलना)।
- सामग्री के लिए एक छवि की जाँच करें (जैसे। चेहरे की पहचान)।
सामान्य मुद्दे:
- सुरक्षा कारणों से,
getImageDataअक्षम है यदि आपने वेब पेज की तुलना में एक अलग डोमेन पर उत्पन्न छवि खींची है। -
getImageDataएक अपेक्षाकृत महंगी विधि है क्योंकि यह एक बड़ा पिक्सेल-डेटा सरणी बनाता है और क्योंकि यह अपने प्रयासों की सहायता के लिए GPU का उपयोग नहीं करता है। नोट: कैनवस में अब मिश्रितgetImageDataहै जो कि कुछ समान पिक्सेल हेरफेर करgetImageDataहै जोgetImageDataकरता है। - .Png छवियों के लिए,
getImageDataमूल .png फ़ाइल के समान सटीक रंगों की रिपोर्ट नहीं कर सकता है क्योंकि ब्राउज़र को कैनवास पर चित्र बनाते समय गामा-सुधार और अल्फा-प्रीमिप्लिपिलेशन करने की अनुमति है।
पिक्सेल रंग प्राप्त करना
सभी के लिए या अपने कैनवास सामग्री के भाग के लिए पिक्सेल रंग लाने के लिए getImageData का उपयोग करें।
getImageData विधि एक imageData ऑब्जेक्ट देता है
imageData वस्तु एक है .data संपत्ति है कि पिक्सेल रंग में जानकारी शामिल है।
data प्रॉपर्टी एक Uint8ClampedArray जिसमें लाल, हरा, नीला और अल्फा (अस्पष्टता) रंग डेटा है जो आपके अनुरोधित पिक्सेल के लिए है।
// determine which pixels to fetch (this fetches all pixels on the canvas)
var x=0;
var y=0;
var width=canvas.width;
var height=canvas.height;
// Fetch the imageData object
var imageData = context.getImageData(x,y,width,height);
// Pull the pixel color data array from the imageData object
var pixelDataArray = imageData.data;
आप किसी भी [x, y] पिक्सेल की स्थिति data सरणी में इस तरह प्राप्त कर सकते हैं:
// the data[] array position for pixel [x,y]
var n = y * canvas.width + x;
और फिर आप उस पिक्सेल के लाल, हरे, नीले और अल्फा मानों को इस तरह ला सकते हैं:
// the RGBA info for pixel [x,y]
var red=data[n];
var green=data[n+1];
var blue=data[n+2];
var alpha=data[n+3];
एक इलस्ट्रेशन दिखा रहा है कि कैसे पिक्सेल डेटा सरणी संरचित है
context.getImageData छोटे 2x3 पिक्सेल आकार के कैनवास के लिए नीचे सचित्र है:
