Canvas getImageData() विधि

Canvas संदर्भ मानचित्र

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

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

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

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

रंग/alpha एक रूपांतर रूप में मौजूद है और ImageData ऑब्जैक्ट के data गुणत्व में उपयोग कर सकते हैं。

सूचना:गणितीय रूप से रंग/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 (var 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);

स्वयं प्रयोग करें

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

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

च्रोम एज फायरफॉक्स सैफारी ऑपेरा
च्रोम एज फायरफॉक्स सैफारी ऑपेरा
4.0 9.0 3.6 4.0 10.1

टिप्पणी:Internet Explorer 8 और उससे पहले के संस्करणों ने <canvas> एलीमेंट को समर्थित नहीं किया।

Canvas संदर्भ मानचित्र