Canvas createImageData() विधि

Canvas संदर्भ निर्देशिका

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

createImageData() नए खाली ImageData ऑब्जैक्ट को बनाने के लिए विधि।नए ऑब्जैक्ट के डिफ़ॉल्ट पिक्सल मूल्य ट्रांसपेरेंट ब्लैक है。

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

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

इसलिए ,ट्रांसपेरेंट ब्लैक (0,0,0,0) को प्रदर्शित किया जाता है。

color/alpha एक array में मौजूद है, और जैसा कि array हर पिक्सल के चार जानकारी को शामिल करता है, array का आकार ImageData ऑब्जैक्ट के चार गुना है।(एक आसान तरीका यह है कि ImageDataObject.data.length का उपयोग करना)

color/alpha जानकारी वाला array ImageData ऑब्जैक्ट के data गुण में

अध्यार्थना:ऑपरेशन पूरा होने के बाद array में color/alpha जानकारी को हासिल करने के लिए आप इस्तेमाल कर सकते हैं putImageData() तरीका इमेज डाटा को कैनवस पर लाइस्कर करता है।

उदाहरण:

इस सिंताक्स से ImageData ऑब्जेक्ट के पहले पिक्सल को लाल बनाया जाता है:

imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

इस सिंताक्स से ImageData ऑब्जेक्ट के दूसरे पिक्सल को लाल बनाया जाता है:

imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

उदाहरण

100*100 पिक्सल का ImageData ऑब्जेक्ट बनाएं जिसमें प्रत्येक पिक्सल लाल है और इसे कैनवस पर रखें:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4)
  {
  imgData.data[i+0]=255;
  imgData.data[i+1]=0;
  imgData.data[i+2]=0;
  imgData.data[i+3]=255;
  }
ctx.putImageData(imgData,10,10);

अपने आपको प्रयोग करें

सिंताक्स

createImageData() विधि की दो संस्करण हैं:

1. निर्दिष्ट आकार (पिक्सल में) के समान नया ImageData ऑब्जेक्ट बनाएं:

var imgData=context.createImageData(width,height);

2. निर्दिष्ट दूसरे ImageData ऑब्जेक्ट के आकार के समान नया ImageData ऑब्जेक्ट बनाएं (इमेज डाटा की प्रतिकृति नहीं की जाएगी):

var imgData=context.createImageData(imageData);

पारामीटर का मूल्य

पारामीटर वर्णन
width ImageData ऑब्जेक्ट की चौडाई पिक्सल में।
height ImageData ऑब्जेक्ट की ऊंचाई पिक्सल में।
imageData एक अन्य ImageData ऑब्जेक्ट।

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

इस तालिका में उल्लिखित संख्याएं उस ब्राउज़र की संस्करण को सूचित करती है जो पहली बार इस गुण को पूरी तरह से समर्थित करता है।

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

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

Canvas संदर्भ निर्देशिका