Canvas getImageData() ਮੱਦਾ

Canvas ਸੰਦਰਭ ਮੁੱਲ

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

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 ਆਬਜੈਕਟ ਵਿੱਚ ਪਹਿਲੇ ਪਿਕਸੇਲ ਦੇ color/alpha ਸੂਚਨਾ ਪ੍ਰਾਪਤ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ:

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 ਕੈਂਵਸ ਟੈਗ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ ਹੈ。

ਜਵਾਬੀ ਪੱਤਰ:

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> ਐਲੀਮੈਂਟ ਸਮਰੱਥ ਨਹੀਂ ਹੈ。

Canvas ਸੰਦਰਭ ਮੁੱਲ