Canvas createImageData() পদ্ধতি

Canvas পরিবেশিকা

অর্থ ও ব্যবহার

createImageData() পদ্ধতি একটি নতুন শুধুমাত্র ইমেজডাটা অবজেক্ট তৈরি করতে। নতুন অবজেক্টের ডিফল্ট পিক্সেল মান transparent black।

ImageData অবজেক্টের প্রত্যেক পিক্সেলের জন্য, চারটি তথ্য রয়েছে, যেমন RGBA মান:

  • R - লাল (0-255)
  • G - সবুজ (0-255)
  • B - নীল (0-255)
  • A - alpha চ্যানেল (0-255; 0 হল স্বচ্ছ, 255 হল সম্পূর্ণ দৃশ্যমান)

তাই , স্বচ্ছ কালো হল (0,0,0,0)।

color/alpha একটি এক্সেক্সপ্রেসন রূপে রয়েছে, এবং যেহেতু এক্সেক্সপ্রেসন প্রত্যেক পিক্সেলের চারটি তথ্য ধারণ করে, এক্সেক্সপ্রেসন এর মাপকাঠিতেকে ইমেজডাটা অবজেক্টের চারগুণ বড় হয় (এক্সেক্সপ্রেসন এর মাপকাঠিতেকে পাওয়ার একটি সহজ পদ্ধতি হল ImageDataObject.data.length)

কার্যকরীতা/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

মন্তব্য:Internet Explorer 8 এবং তার পূর্ববর্তী সংস্করণগুলি <canvas> অবজেক্টটি সমর্থন করে না。

Canvas পরিবেশিকা