HTML canvas createImageData() विधि

HTML5 Canvas संदर्भ दस्तावेज़

विवरण और उपयोग

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

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

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

इसलिए ,पारदर्शी काला (0,0,0,0) को दिखाया जाता है।

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

color/alpha जानकारी वाले आयत्त्रिक के ImageData ऑब्जैक्ट के data प्रकृति में इस्तेमाल कर सकते हैं.

अध्याय:आप आयत्त्रिक रूप से 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 कैनवस टैग को समर्थित नहीं करता.

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

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 ऑब्जैक्ट को बनाएं (चित्र डाटा को नहीं नक़ल किया जाएगा):

var imgData=context.createImageData(imageData);

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

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

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

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

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 संदर्भ दस्तावेज़