کانواس کا createImageData() طریقہ

کینووس رجسٹر

تعریف اور استعمال

createImageData() نئی خالی ImageData کا آئی میڈیا کا سائز بنانے کا طریقہ، نئی آئی میڈیا کا سائز کا میں دفعہ شفاف کالہ ہوتا ہے。

ImageData کا ہر پیکسل کا لئے چار معلومات موجود ہیں، یعنی RGBA کا مطلب ہوتا ہے:

  • R - سرخ (0-255)
  • G - سرخ (0-255)
  • B - نیلا (0-255)
  • A - alpha چینل (0-255; 0 شفاف، 255 پورا دکھائی دینا)

اس لئے، شفاف کالہ (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 آوائج کا قیام کرنا (تصویر کے اعداد کو نہیں کاپی کرنا):

var imgData=context.createImageData(imageData);

پارامتر کا مقادیر

پارامتر وصف
width ImageData آوائج کی چوڑائی، پیکسلو میں
height ImageData آوائج کی بلندی، پیکسلو میں
imageData ایک دوسرا ImageData آوائج

براوزر کی مدد

جداول میں دکھائی گئی اعداد، پہلے اس کی اپنائی جانے والی براوزر کی ورژن کو کہتے ہیں.

کروم ایج فائر فاکس سافری آپرا
کروم ایج فائر فاکس سافری آپرا
4.0 9.0 3.6 4.0 10.1

نوٹ:اینٹرنیشنل ایکسپلورر 8 اور اس سے پچھلے ورژن <کینووس> عنصر کو نہیں دعو کرسکتا.

کینووس رجسٹر