HTML canvas createImageData() วิธี

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

การระบุและการใช้งาน

createImageData() วิธีที่ทำให้มี ImageData ที่มีพื้นที่ว่างใหม่ ค่าพิกเซลของโอปเจกที่มีค่าเริ่มต้นคือ โปรโมทโดยสาร

สำหรับทุกบิตที่ 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）

ক্যালার/অ্যালফা তথ্য সমূহ আইমেজডাটা অবজেক্টের data এক্সপ্রোপার্টি এবং

সতর্কতা:ক্যালার/অ্যালফা তথ্য আইনফরমেশন পরিচালনা করার পরে, আপনি ব্যবহার করতে পারেন: 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 canvas ট্যাগটির সমর্থন করে না。

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 ইউনিট

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

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

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 রেফারেন্স ম্যানুয়েল