Canvas getImageData() পদ্ধতি

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 তথ্যকে কাজ করার পরে, আপনি ব্যবহার করতে পারেন: 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() এবং ক্যানভাসের ওপর চিত্রের প্রত্যেক পিক্সেলের রঙ পরিবর্তন করুন。

আপনার ব্রাউজার এইচটিএমএল৫ ক্যানভাস ট্যাগটি সমর্থন করে না。

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

আপনার নিজেই প্রয়োগ করুন

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

তালিকায় সংখ্যাগুলি প্রথম এই বৈশিষ্ট্যকে সম্পূর্ণরূপে সমর্থনকারী ব্রাউজারের সংস্করণটি উল্লেখ করে।

চ্রোম এজ ফায়ারফক্স স্যাফারি অপেরা
চ্রোম এজ ফায়ারফক্স স্যাফারি অপেরা
4.0 9.0 3.6 4.0 10.1

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

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