HTML ਕੈਂਵਾਸ createImageData() ਮੈਥਡ

HTML5 Canvas ਪ੍ਰਤੀਯੋਗਿਤਾ ਮੈਨੂਅਲ

ਵਿਵਰਣ ਅਤੇ ਵਰਤੋਂ

createImageData() ਨਵਾਂ ਖਾਲੀ ਇਮੇਜਡਾਟਾ ਆਬਜੈਕਟ ਬਣਾਉਣ ਦਾ ਤਰੀਕਾ। ਨਵੇਂ ਆਬਜੈਕਟ ਦੇ ਡਿਫਾਲਟ ਪਿਕਸਲ ਮੁੱਲ ਟ੍ਰਾਂਸਪੇਰੈਂਟ ਬਲੈਕ ਹੁੰਦਾ ਹੈ。

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

  • R - ਲਾਲ (0-255)
  • G - ਹਰੀ (0-255)
  • B - ਨੀਲਾ (0-255)
  • A - alpha 通道 (0-255; 0 ਸਾਫ਼ ਹੈ, 255 ਪੂਰੀ ਤਰ੍ਹਾਂ ਦੇਖਿਆ ਜਾਂਦਾ ਹੈ)

ਇਸ ਲਈ , ਟ੍ਰਾਂਸਪਰੈਂਟ ਬਲੈਕ (0,0,0,0) ਦੇ ਰੂਪ ਵਿੱਚ ਪੇਸ਼ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।

color/alpha ਨੂੰ ਆਰਰੇ ਫਾਰਮੈਟ ਵਿੱਚ ਰੱਖਿਆ ਹੁੰਦਾ ਹੈ ਅਤੇ ਜਿਵੇਂ ਆਰਰੇ ਹਰ ਪਿਕਸਲ ਦੇ ਚਾਰ ਸੂਚਨਾਵਾਂ ਰੱਖਦੇ ਹਨ ਤਾਂ ਆਰਰੇ ਦਾ ਮੋਟਾਪਾ ਇਮੇਜਡਾਟਾ ਆਬਜੈਕਟ ਦੇ ਚਾਰ ਗੁਣਾ ਹੁੰਦਾ ਹੈ।(ਆਰਰੇ ਦਾ ਮੋਟਾਪਾ ਮਿਲਣ ਲਈ ਸਰਲ ਤਰੀਕਾ ਇਮੇਜਡਾਟਾ ਆਬਜੈਕਟ ਦਾ data.length ਵਰਤਣਾ ਹੈ)

color/alpha ਸੂਚਨਾ ਸ਼ਾਮਲ ਹੋਣ ਵਾਲੇ ਆਰਰੇ ਇਮੇਜਡਾਟਾ ਆਬਜੈਕਟ ਦੇ 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 ਪਿਕਸਲ ਦਾ ਇਮੇਜਡਾਟਾ ਆਬਜੈਕਟ ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਹਰ ਪਿਕਸਲ ਲਾਲ ਹੋਵੇ ਅਤੇ ਇਸ ਨੂੰ ਕੈਂਵਾਸ 'ਤੇ ਰੱਖੋ:

ਤੁਹਾਡਾ ਬਰਾਉਜ਼ਰ ਐਚਟੀਐਮਐਲ5 ਕੈਂਵਾਸ ਟੈਗ ਨਹੀਂ ਸਮਰਥਾਉਂਦਾ ਹੈ。

ਜਾਵਾਸਕ੍ਰਿਪਟ:

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

HTML5 Canvas ਪ੍ਰਤੀਯੋਗਿਤਾ ਮੈਨੂਅਲ