HTML canvas createImageData() పద్ధతి
నిర్వచనం మరియు ఉపయోగం
createImageData() కొత్త ఖాళీ ImageData ఆబ్జెక్ట్ని సృష్టించే మాదిరి. కొత్త ఆబ్జెక్ట్ పిక్సెల్ విలువలు డిఫాల్ట్ ట్రాన్స్పరెంట్ బ్లాక్ ఉంటాయి.
ImageData ఆబ్జెక్ట్లో ప్రతి పిక్సెల్కు, RGBA విలువలు ఉన్నాయి అని వివరించబడింది:
- R - ఎరుపు (0-255)
- G - ఎరుపు (0-255)
- B - నీలం (0-255)
- A - alpha 通道 (0-255; 0 స్పష్టం, 255 పూర్తి కనిపించే గా ఉంటుంది)
అందువలన, ట్రాన్స్పరెంట్ బ్లాక్ (0,0,0,0) అని అర్థం చేస్తారు.
కలర్/అల్ఫా ప్రక్రియాలు ప్రక్రియా పెట్టెలో ఉన్నాయి, మరియు ప్రతి పిక్సెల్కు నాలుగు సమాచారాలు ఉన్నందున, పెట్టె పరిమాణం ఇమేజ్ డాటా ఆబ్జెక్ట్ యొక్క నాలుగు రెట్లు అవుతుంది. (పెట్టె పరిమాణాన్ని సరళంగా పొందడానికి, ImageDataObject.data.length ఉపయోగించవచ్చు)
కలర్/అల్ఫా సమాచారం కలిగిన ప్రక్రియా పెట్టె ఇమేజ్ డాటా ఆబ్జెక్ట్ లో ఉంది: data పరిమితిలో.
సూచన:కలర్/అల్ఫా సమాచారం ప్రక్రియా ముగిసిన తర్వాత, మీరు ఈ పరిమితిలో ఉపయోగించవచ్చు: putImageData() ఈ మంథా చిత్ర డాటాను కాన్వాస్ పైకి కాపీ చేస్తుంది.
ఉదాహరణలు:
ఈ సంకేతాలు ఇమేజ్ డాటా ఆబ్జెక్ట్ లోని మొదటి పిక్సెల్ను రెడ్డి చేస్తాయి:
imgData = ctx.createImageData(100, 100); imgData.data[0] = 255; imgData.data[1] = 0; imgData.data[2] = 0; imgData.data[3] = 255;
ఈ సంకేతాలు ఇమేజ్ డాటా ఆబ్జెక్ట్ లోని రెండవ పిక్సెల్ను రెడ్డి చేస్తాయి:
imgData = ctx.createImageData(100, 100); imgData.data[4] = 0; imgData.data[5] = 255; imgData.data[6] = 0; imgData.data[7] = 255;
ఉదాహరణ
100*100 పిక్సెల్స్ అయిన రెడ్డి కలర్ కలిగిన ImageData ఆబ్జెక్ట్ సృష్టించి, అది కాన్వాస్ పైకి పెట్టండి:
జావాస్క్రిప్ట్:
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);
సంకేతాలు
రెండు రకాల క్రెయిట్ ఇమేజ్ డాటా మెట్హడ్ ఉన్నాయి:
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> అంశాన్ని మద్దతు ఇవ్వలేదు.
