HTML canvas getImageData() विधि

HTML5 Canvas संदर्भ पुस्तक

परिभाषा और उपयोग

getImageData() विधि ImageData ऑब्जेक्ट वापस देती है, जो चित्रकूदा में निर्दिष्ट रेखाचित्र के पिक्सल डेटा को कॉपी करती है。

ImageData ऑब्जेक्ट के हर पिक्सल के लिए चार प्रकार की जानकारी होती है, अर्थात RGBA मूल्य:

  • R - लाल (0-255)
  • G - हरा (0-255)
  • B - नीला (0-255)
  • A - alpha चैनल (0-255; 0 पारदर्शी है, 255 पूरी तरह से दृश्यमान है)

color/alpha एक एक्सेसबल रूप में मौजूद है और ImageData ऑब्जेक्ट के data प्रयोग कर सकते हैं

सूचना:जब color/alpha जानकारी परिवर्तन पूरा होने के बाद आप putImageData() विधि चित्रकूदा पर इमेज डेटा को कॉपी करेगी。

उदाहरण:

इस कोड से वापस दिए गए ImageData ऑब्जेक्ट के पहले पिक्सल के color/alpha जानकारी प्राप्त कर सकते हैं:

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;

（नीचे 'अपने आप सिर्फ एक प्रयोग' इन्स्टांस को देखें।）

इन्स्टांस

उदाहरण 1

नीचे दिए गए कोड द्वारा 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);
}

खुद से प्रयास करें

सूचना:पान के नीचे और अधिक उदाहरण मिलते हैं。

व्याकरण

var imgData=context.getImageData(x,y,width,height);

पारामीटर मान

पारामीटर वर्णन
x कॉपी करने वाले चतुर्भुज के बाहरी बिन्दु के x स्थानांक
y कॉपी करने वाले चतुर्भुज के बाहरी बिन्दु के y स्थानांक
width कॉपी करने वाले चतुर्भुज क्षेत्र की चौड़ाई
height कॉपी करने वाले चतुर्भुज क्षेत्र की ऊंचाई

और अधिक उदाहरण

उदाहरण 2

उपयोग के लिए चित्र:

टुलीप

getImageData() का उपयोग करके कैनवस पर चित्र के प्रत्येक पिक्सल के रंग को उल्टा करने के लिए इस्तेमाल करें。

आपका ब्राउज़र HTML5 कैनवस टैग को समर्थित नहीं करता。

जावास्क्रिप्ट:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// रंग उल्टाना
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);

खुद से प्रयास करें

ब्राउज़र समर्थन

तालिका में गिने नंबर इस अटिबाहत को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र के संस्करण को सूचित करते हैं。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

टिप्पणी：Internet Explorer 8 और अधिक पुरानी संस्करण <canvas> एलीमेंट को नहीं समर्थित करते हैं。

HTML5 Canvas संदर्भ पुस्तक