HTML कैनवास createImageData () विधि
उदाहरण
एक 100*100 पिक्सेल इमेजडेटा ऑब्जेक्ट बनाएँ जहाँ हर पिक्सेल लाल हो, और इसे कैनवास पर रखें:
जावास्क्रिप्ट:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(100, 100);
var i;
for (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);
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से विधि का समर्थन करता है।
| Method | |||||
|---|---|---|---|---|---|
| createImageData() | Yes | 9.0 | Yes | Yes | Yes |
परिभाषा और उपयोग
createImageData() विधि एक नया, रिक्त ImageData ऑब्जेक्ट बनाता है। नई वस्तु के पिक्सेल मान डिफ़ॉल्ट रूप से पारदर्शी काले होते हैं।
ImageData ऑब्जेक्ट में प्रत्येक पिक्सेल के लिए सूचना के चार टुकड़े होते हैं, RGBA मान:
आर - रंग लाल (0-255 से)
जी - रंग हरा (0-255 से)
बी - रंग नीला (0-255 से)
ए - अल्फा चैनल (0-255 से; 0 पारदर्शी है और 255 है पूरी तरह से दृश्यमान)
तो, पारदर्शी काला इंगित करता है: (0,0,0,0)।
रंग/अल्फा जानकारी एक सरणी में रखी जाती है, और चूंकि सरणी में प्रत्येक पिक्सेल के लिए जानकारी के 4 टुकड़े होते हैं, सरणी का आकार ImageData ऑब्जेक्ट के आकार का 4 गुना होता है: चौड़ाई * ऊंचाई * 4। (सरणी के आकार को खोजने का एक आसान तरीका ImageDataObject.data.length का उपयोग करना है)
रंग/अल्फा जानकारी युक्त सरणी ImageData ऑब्जेक्ट की डेटा प्रॉपर्टी में संग्रहीत होती है।
युक्ति: सरणी में रंग/अल्फा जानकारी में हेरफेर करने के बाद, आप छवि डेटा को वापस कैनवास पर 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;
जावास्क्रिप्ट सिंटैक्स
createImageData () विधि के दो संस्करण हैं:
1. यह निर्दिष्ट आयामों (पिक्सेल में) के साथ एक नया ImageData ऑब्जेक्ट बनाता है:
| जावास्क्रिप्ट सिंटैक्स: | var imgData = संदर्भ । createImageData ( चौड़ाई, ऊंचाई ); |
|---|
2. यह एक और इमेजडेटा ऑब्जेक्ट के समान आयामों के साथ एक नया इमेजडेटा ऑब्जेक्ट बनाता है जो अन्य इमेजडेटा द्वारा निर्दिष्ट ऑब्जेक्ट है (यह छवि डेटा की प्रतिलिपि नहीं बनाता है):
| JavaScript syntax: | var imgData=context.createImageData(imageData); |
|---|
पैरामीटर मान
| Parameter | Description |
|---|---|
| width | The width of the new ImageData object, in pixels |
| height | The height of the new ImageData object, in pixels |
| imageData | anotherImageData object |
❮ HTML कैनवास संदर्भ