دليل مرجع HTML

كامل علامات HTML

طريقة getImageData() في canvas HTML

يستعيد getImageData() عملاً ImageData، والذي يستخدمه لوصف بيانات البكسلات المضمنة في منطقة الرسام، هذه المنطقة تمثلها دالة مستطيل، ويكون النقطة البداية (sx, sy)، ويكون العرض sw، والارتفاع sh.

دليل مرجع HTML canvas

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

يستخدم الكود أدناه getImageData() لتسجيل بيانات البكسلات في المربع المحدد على الرسام، ثم يستخدم imageData() لوضع بيانات الصورة مرة أخرى على الرسام:

مثال

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>استخدام طريقة getImageData() في 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");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()}
{
　　　　var imgData=ctx.getImageData(10,10,50,50);
　　　　ctx.putImageData(imgData,10,70);
}
</script>
<button onclick="copy()">复制</button>
</body>
</html>

اختبار لرؤية ‹/›

浏览器兼容性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 getImageData() 方法。

注意： nternet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。

注意：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 信息：

مثال

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>استخدام طريقة getImageData() في 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");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
var imgData=ctx.getImageData(30,30,50,50);
red = imgData.data[0];
green = imgData.data[1];
blue = imgData.data[2];
alpha = imgData.data[3];
alert(red + " " + green + " " + blue + " " + alpha);
</script>
</body>
</html>

اختبار لرؤية ‹/›

نصيحة:يمكنك أيضًا استخدام طريقة getImageData() لتحويل لون كل بكسل في صورة معينة على اللوحة.

استخدام هذه الصيغة لمرور جميع البكسلات وتغيير قيم لونها:

　　　　　　　　red = 255 - old_red;
green = 255 - old_green;
blue = 255 - old_blue;

جملة لغوية JavaScript

جملة لغوية JavaScript:	سياق.getImageData(x,y,width,height);

قيمة المتغير

المتغيرات	وصف
x	موقع اليسار العلوي للمنطقة المربعة للنسخ (بكسل).
y	موقع اليسار العلوي للمنطقة المربعة للنسخ (بكسل).
width	عرض المنطقة المربعة التي سيتم نسخها.
height	ارتفاع المنطقة المربعة التي سيتم نسخها.

الصورة التي سيتم استخدامها:

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

استخدام getImageData() لتحويل لون كل بكسل في اللوحة على الرسومات.

مثال

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>استخدام طريقة getImageData() في HTML canvas - درس أساسي (oldtoolbag.com)</title>
</head>
<body>
<img id="scream" src="views.png">
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;">
على جهازك التابع لا يدعم علامة HTML5 canvas.
</canvas>
<script>
document.getElementById("scream").onload = function()
{
　　　　var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d");
　　　　var　img=document.getElementById("scream");
　　　　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);
};
</script>
</body>
</html>

اختبار لرؤية ‹/›

دليل مرجع HTML canvas

HTML: <template> النموذج