English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
putImageData() هو طريقة Canvas 2D API لرسم البيانات من Object ImageData الموجود مسبقًا إلى الصورة. إذا تم تقديم مستطيل رسم، سيتم رسم بكسلات هذا المستطيل فقط. لا يؤثر هذا الأسلوب على معادلة تحويل اللوحة.
استخدم الكود التالي لنسخ بيانات البكسل لمستطيل معين على الرسم البياني باستخدام 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 طريقة putImageData().
ملاحظة:Internet Explorer 8 وما قبلها لا يدعم عنصر <canvas>.
يضع البيانات الصور (من البيانات المحددة من قبلImageData) مرة أخرى على الرسم البياني.
إشارة:انظر getImageData() الطريقة، التي يمكنها نسخ بيانات البكسل لمستطيل معين على الرسم البياني.
إشارة:انظر createImageData() الطريقة التي يمكنها إنشاء مساحة بيانات جديدة فارغة من ImageData.
| جملة JavaScript: | السياق.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight); |
|---|
| المعامل | الوصف |
|---|---|
| imgData | تحديد مساحة البيانات الصور (ImageData) التي سيتم وضعها على اللوحة. |
| x | موقع x في الزاوية العلوية اليسرى لمساحة البيانات الصور (ImageData) بالبكسل. |
| y | موقع y في الزاوية العلوية اليسرى لمساحة البيانات الصور (ImageData) بالبكسل. |
| dirtyX | اختياري. القيمة الأفقية (x)، بالبكسل، لموضع الصورة على اللوحة. |
| dirtyY | اختياري. القيمة العمودية (y)، بالبكسل، لموضع الصورة على اللوحة. |
| dirtyWidth | اختياري. العرض المستخدم في رسم الصورة على اللوحة. |
| dirtyHeight | اختياري. الارتفاع المستخدم في رسم الصورة على اللوحة. |