Canvas getImageData() 方法
నిర్వచనం మరియు ఉపయోగం
getImageData()
ఈ మాదిరిగా కెన్వాస్ నిర్దేశించిన స్క్రీన్ పిక్సెల్ డేటాను కాపీ చేసే ImageData అవతరణమును మాదిరిగా మాదిరిగా పొందవచ్చు.
ImageData అవతరణములోని ప్రతి పిక్సెల్కు నాలుగు రకమైన సమాచారములు ఉన్నాయి, అవి RGBA విలువలు అని పిలుస్తారు:
- R - రెడ్ (0-255)
- G - గ్రీన్ (0-255)
- B - బ్లూ (0-255)
- A - alpha చానల్ (0-255; 0 పారదర్శకము, 255 పూర్తి కనిపించే విధముగా ఉంటుంది)
color/alpha క్రమబద్ధమైన అంశముగా ఉంటుంది మరియు ImageData అవతరణము లో నిలుస్తుంది: data అనునది లో.
సూచన:కలర్/అల్ఫా సమాచారమును ప్రాసెస్ చేసిన తర్వాత మీరు ఉపయోగించవచ్చు: 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() ఉపయోగించండి.
జావాస్క్రిప్ట్:
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> అంశం.