Canvas createImageData() 方法

Canvas مراجع دستاویز

定义和用法

createImageData() 方法创建新的空白 ImageData 对象。新对象的默认像素值 transparent black。

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

  • R - 红色 (0-255)
  • G - 绿色 (0-255)
  • B - 蓝色 (0-255)
  • A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)

因此 ，transparent black 表示 (0,0,0,0)。

color/alpha 以数组形式存在，并且既然数组包含了每个像素的四条信息，数组的大小是 ImageData 对象的四倍。（获得数组大小有更简单的办法，就是使用 ImageDataObject.data.length）

包含 color/alpha 信息的数组存储于 ImageData 对象的 data 属性中。

提示：在操作完成数组中的 color/alpha 信息之后，您可以使用 putImageData() ਮੱਥਦਾਨ ਚਿੱਤਰ ਦਾ ਡਾਟਾ ਕੈਂਵਸ 'ਤੇ ਲਿਆਉਣ ਵਾਲਾ ਹੈ।

ਉਦਾਹਰਣ:

ਇਹ ਸਿਧਾਂਤ ImageData ਆਬਜ਼ਡ ਵਿੱਚ ਪਹਿਲੇ ਪਿਕਸਲ ਨੂੰ ਲਾਲ ਬਣਾ ਦਿੰਦਾ ਹੈ:

imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

ਇਹ ਸਿਧਾਂਤ ImageData ਆਬਜ਼ਡ ਵਿੱਚ ਦੂਜੇ ਪਿਕਸਲ ਨੂੰ ਲਾਲ ਬਣਾ ਦਿੰਦਾ ਹੈ:

imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

ਉਦਾਹਰਣ

100*100 ਪਿਕਸਲ ਦਾ ImageData ਆਬਜ਼ਡ ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਹਰ ਪਿਕਸਲ ਲਾਲ ਹੋਵੇ ਅਤੇ ਇਸ ਨੂੰ ਕੈਂਵਸ 'ਤੇ ਰੱਖੋ:

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

JavaScript:

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);

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਸਿਧਾਂਤ

createImageData() ਮੱਥਦਾਨ ਦੋ ਸ਼ਕਲਾਂ ਹਨ:

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

نوٹ:اینٹرنیٹ ایکسپلورر 8 اور اس سے پچھلے کی نسلیں <canvas> علامت کو نہیں پشتیبند کراتی ہیں

Canvas مراجع دستاویز