دليل HTML

كامل قائمة HTML

طريقة HTML canvas createImageData()

createImageData() هي واجهة Canvas 2D API لإنشاء ImageData الجديدة، الفارغة، والمحددة الحجم. جميع البكسلات في العنصر الجديد تكون شفافة.

دليل مرجع HTML canvas

مثال على الإنترنت

أنشئ عنصر ImageData ذو حجم 100 * 100 بكسل يحتوي على لون أحمر فقط، ثم أضفه إلى اللوحة.

مثال

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>دليل أساسي حول استخدام طريقة createImageData() في HTML canvas - (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
على جهازك لا يدعم واجهة "HTML5 canvas".
</canvas>
<script>
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);
</script>
</body>
</html>

التحقق من التوافق

توافق المتصفحات

IEFirefoxOperaChromeSafari

يدعم Internet Explorer 9، Firefox، Opera، Chrome و Safari createImageData() الطريقة.

ملاحظة:لا يدعم إصدارات Internet Explorer 8 والإصدارات السابقة عنصر <canvas>.

التعريف والاستخدام

يُنشأ طريقة createImageData() Object ImageData جديدًا فارغًا. القيمة الافتراضية للبكسل الجديد هي الأسود الشفاف.

لكل بكسل في Object ImageData، هناك أربعة معلومات، وهي قيم RGBA:

R - الأحمر (0-255)
G - الأخضر (0-255)
B - الأزرق (0-255)
A - قناة الشفافية (0-255; 0 هو شفاف، 255 هو مرئي بالكامل)

لذلك، يُمثل الأسود الشفاف (0,0,0,0).

معلومات اللون/الشفافية موجودة بشكل جماعي، وتكون حجم المجموعة أربعة مرات أكبر من حجم Object ImageData نظرًا لأن المجموعة تحتوي على أربعة معلومات لكل بكسل: width*height*4. (هناك طريقة أبسط للحصول على حجم المجموعة، وهي استخدام ImageDataObject.data.length)

تم تخزين المجموعة التي تحتوي على معلومات اللون/الشفافية في Object ImageData في data في الخصائص.

نصيحة:بعد إتمام عمليات العمل على معلومات اللون/الشفافية في المجموعة، يمكنك استخدام putImageData() يتم استنساخ بيانات الصورة على اللوحة باستخدام

مثال:

القواعد لتحويل أول بكسل من Object ImageData إلى اللون الأحمر:

imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

القواعد لتحويل ثاني بكسل من Object ImageData إلى اللون الأخضر:

imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

جافا سكربت الجملة

هناك نسختان من طريقة createImageData():

1. إنشاء ImageData object جديد بقياس محدد (بالبكسل):

جافا سكربت الجملة:	تعريف imgData=السياق.createImageData(width,height);

2. إنشاء ImageData object جديد بنفس حجم ImageData object المحدد مسبقًا (بدون نسخ بيانات الصورة):

جافا سكربت الجملة:	تعريف imgData=السياق.createImageData(imageData);

قيمة المتغير

المتغير	الوصف
width	عرض ImageData object، بالبكسل.
height	ارتفاع ImageData object، بالبكسل.
imageData	ImageData object آخر.

　دليل مرجع HTML canvas

HTML: <template> علامة