HTML ਕੈਂਵਸ getImageData() ਮੰਥਨ

HTML5 Canvas ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

getImageData() ਮੰਥਨ ਇਮੇਜ਼ ਡਾਟਾ ਆਬਜੈਕਟ ਨੂੰ ਵਾਪਸ ਦਿੰਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਕੈਂਵਸ ਵਿੱਚ ਚੁਣੇ ਹੋਏ ਸਕੇਲ ਦੇ ਪਿਕਸਲ ਡਾਟਾ ਕਾਪੀ ਕੀਤਾ ਗਿਆ ਹੈ。

ਇਮੇਜ਼ ਡਾਟਾ ਆਬਜੈਕਟ ਵਿੱਚ ਹਰੇਕ ਪਿਕਸਲ ਲਈ ਚਾਰ ਪ੍ਰਕਾਰ ਦੀਆਂ ਸੂਚਨਾਵਾਂ ਮੌਜੂਦ ਹੁੰਦੀਆਂ ਹਨ, ਜਿਵੇਂ ਕਿ RGBA ਮੁੱਲ:

  • R - ਲਾਲ (0-255)
  • G - ਹਰੀ (0-255)
  • B - ਨੀਲਾ (0-255)
  • A - alpha ਚੈਨਲ (0-255; 0 ਪਾਰਦਰਸ਼ੀ ਹੈ, 255 ਪੂਰੀ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ)

color/alpha ਨੂੰ ਅਰਰੇ ਫਾਰਮ ਵਿੱਚ ਮੌਜੂਦ ਹੈ ਅਤੇ ਇਮੇਜ਼ ਡਾਟਾ ਆਬਜੈਕਟ ਵਿੱਚ ਸਟੋਰ ਕੀਤਾ ਗਿਆ ਹੈ: data ਵਿਸ਼ੇਸ਼ਤਾ

ਸੁਝਾਅ:ਜਦੋਂ ਤੁਸੀਂ ਅਰਰੇ ਵਿੱਚ ਦੇਸ਼ ਦੇ color/alpha ਸੂਚਨਾ ਦੇ ਕੰਮ ਕਰਨ ਤੋਂ ਬਾਅਦ ਤੁਸੀਂ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਵਿੱਚ ਇਸਤੇਮਾਲ ਕਰ ਸਕਦੇ ਹੋ: putImageData() ਮੰਥਨ ਨਾਲ ਇਮੇਜ਼ ਡਾਟਾ ਨੂੰ ਕੈਂਵਸ ਉੱਤੇ ਕਾਪੀ ਕਰਨਾ。

ਉਦਾਹਰਣ:

ਨਿਮਨ ਕੋਡ ਵਾਲੇ ਇਮੇਜ਼ ਡਾਟਾ ਆਬਜੈਕਟ ਵਿੱਚ ਪਹਿਲੇ ਪਿਕਸਲ ਦੇ ਕਲਰ/ਆਲਫਾ ਸੂਚਨਾ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ:

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() ਰਾਹੀਂ ਕੈਂਵਸ ਉੱਤੇ ਨਿਰਧਾਰਿਤ ਚੌਕਟੀ ਖੇਤਰ ਦੇ ਪਿਕਸਲ ਡਾਟਾ ਨੂੰ ਨਕਲ ਕਰਦੇ ਹਨ ਅਤੇ ਫਿਰ ਉਹ ਕੈਂਵਸ 'ਤੇ ਪਾਲਣ ਕਰਦੇ ਹਨ:

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

ਵਰਤਣ ਵਾਲਾ ਚਿੱਤਰ:

The Tulip

ਕੈਂਵਸ ਉੱਤੇ ਚਿੱਤਰ ਦੇ ਹਰੇਕ ਪਿਕਸਲ ਦੇ ਰੰਗ ਨੂੰ ਉਚਿਤ ਕਰਨ ਲਈ getImageData() ਵਰਤੋਂ ਕਰੋ。

ਤੁਹਾਡਾ ਬਰਾਉਜ਼ਰ HTML5 ਕੈਂਵਸ ਟੈਗ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਦਿੰਦਾ ਹੈ。

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> ਐਲੀਮੈਂਟ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਦਿੰਦੀਆਂ ਹਨ。

HTML5 Canvas ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ