HTML কার্টন getImageData() পদ্ধতি

HTML5 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 তথ্যকে

টীকা:যখন কোরিয়াক্ষরণকারী এক্সেসসমূহকে কোরিয়াক্ষরণকারী এক্সেসসমূহের color/alpha তথ্যকে কোরিয়াক্ষরণকারী এক্সেসসমূহের 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() মাধ্যমে ক্যানভাসের নির্দিষ্ট চতুর্ভুজের পিক্সেল ডাটা কপি করা হয়, এবং putImageData() মাধ্যমে চিত্র ডাটা ক্যানভাসে ফিরিয়ে দেওয়া হয়:

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

ব্যবহার্য ছবি:

ট্যুলিপ

getImageData() মাধ্যমে ক্যানভাসের ওপর প্রত্যেক পিক্সেলের রঙ পরিবর্তন করুন。

আপনার ব্রাউজার HTML5 ক্যানভাস ট্যাগটি সমর্থন করে না。

JavaScript:

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

আপনার হাতে পরীক্ষা করুন

ব্রাউজার সমর্থন

সারণীতে দেওয়া সংখ্যা এই এট্রিবিউটটি পূর্ণাত্মকভাবে সমর্থনকারী প্রথম ব্রাউজার সংস্করণটি নির্দেশ করে。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

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

HTML5 Canvas রেফারেন্স ম্যানুয়েল