HTML కాన్వెస్ getImageData() మాధ్యమం
నిర్వచనం మరియు ఉపయోగం
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 అంశం మొదటి పిక్సెల్ కలర్/ఆల్ఫా సమాచారం సమాచారం పొందడానికి ఉపయోగించవచ్చు:
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() ఉపయోగించండి.
JavaScript:
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> ఎలిమెంట్ నిర్లక్ష్యం చేయబడలేదు.
