HTML कैनवास getImageData () विधि
उदाहरण
नीचे दिया गया कोड कैनवास पर एक निर्दिष्ट आयत के लिए पिक्सेल डेटा को getImageData () के साथ कॉपी करता है, और फिर छवि डेटा को वापस कैनवास पर putImageData () के साथ रखता है:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
function copy()
{
var imgData = ctx.getImageData(10, 10, 50, 50);
ctx.putImageData(imgData, 10, 70);
}
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से विधि का समर्थन करता है।
| Method | |||||
|---|---|---|---|---|---|
| getImageData() | Yes | 9.0 | Yes | Yes | Yes |
परिभाषा और उपयोग
GetImageData() विधि एक ImageData ऑब्जेक्ट देता है जो कैनवास पर निर्दिष्ट आयत के लिए पिक्सेल डेटा की प्रतिलिपि बनाता है।
नोट: ImageData ऑब्जेक्ट एक चित्र नहीं है, यह कैनवास पर एक भाग (आयत) निर्दिष्ट करता है, और उस आयत के अंदर प्रत्येक पिक्सेल की जानकारी रखता है।
ImageData ऑब्जेक्ट में प्रत्येक पिक्सेल के लिए सूचना के चार टुकड़े होते हैं, RGBA मान:
आर - रंग लाल (0-255 से)
जी - रंग हरा (0-255 से)
बी - रंग नीला (0-255 से)
ए - अल्फा चैनल (0-255 से; 0 पारदर्शी है और 255 है पूरी तरह से दृश्यमान)
रंग/अल्फा जानकारी एक सरणी में रखी जाती है, और ImageData ऑब्जेक्ट की डेटा प्रॉपर्टी में संग्रहीत होती है।
युक्ति: सरणी में रंग/अल्फा जानकारी में हेरफेर करने के बाद, आप छवि डेटा को वापस कैनवास पर putImageData() विधि के साथ कॉपी कर सकते हैं।
उदाहरण:
लौटाए गए ImageData ऑब्जेक्ट में पहले पिक्सेल की रंग/अल्फा जानकारी प्राप्त करने के लिए कोड:
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
युक्ति: आप कैनवास पर किसी छवि के प्रत्येक पिक्सेल के रंग को उलटने के लिए getImageData() विधि का भी उपयोग कर सकते हैं।
सभी पिक्सेल के माध्यम से लूप करें और इस सूत्र का उपयोग करके रंग मान बदलें:
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
"इसे स्वयं आज़माएं" उदाहरण के लिए नीचे देखें!
जावास्क्रिप्ट सिंटैक्स
| जावास्क्रिप्ट सिंटैक्स: | संदर्भ । getImageData ( एक्स, वाई, चौड़ाई, ऊंचाई ); |
|---|
पैरामीटर मान
| Parameter | Description |
|---|---|
| x | The x coordinate (in pixels) of the upper-left corner to start copy from |
| y | The y coordinate (in pixels) of the upper-left corner to start copy from |
| width | The width of the rectangular area you will copy |
| height | The height of the rectangular area you will copy |
और ज्यादा उदाहरण
उपयोग करने के लिए छवि:
उदाहरण
कैनवास पर किसी छवि के प्रत्येक पिक्सेल के रंग को उलटने के लिए getImageData() का उपयोग करें:
जावास्क्रिप्ट:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 0, 0);
var imgData = ctx.getImageData(0, 0, c.width, c.height);
// invert colors
var i;
for (i = 0; i < imgData.data.length; i += 4) {
imgData.data[i] = 255-imgData.data[i];
imgData.data[i + 1] = 255-imgData.data[i + 1];
imgData.data[i + 2] = 255-imgData.data[i + 2];
imgData.data[i + 3] = 255;
}
ctx.putImageData(imgData, 0, 0);
❮ HTML कैनवास संदर्भ