طريقة putImageData() لورق HTML

دستورالعمل‌های کانواس HTML5

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

putImageData() الطريقة تضع بيانات الصورة (من ImageData المحدد) على الورق.

نصيحة:انظر getImageData() الطريقة، التي يمكن نسخ بيانات البكسل في منطقة معينة من الورق.

نصيحة:انظر createImageData() الطريقة، التي يمكن إنشاء ImageData الجديدة.

مثال

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

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

تجربة بنفسك

قواعد النحو

سياق.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

قيمة المعاملات

معاملات وصف
imgData مقدار ImageData که باید به کانواس برگردانده شود را مشخص می‌کند.
x مقدار x گوشه بالا سمت چپ ImageData به پیکسل.
y مقدار y گوشه بالا سمت چپ ImageData به پیکسل.
dirtyX اختیاری. مقدار افقی (x)، به پیکسل، مکانی که تصویر را در کانواس قرار می‌دهند.
dirtyY اختیاری. مقدار افقی (y)، به پیکسل، مکانی که تصویر را در کانواس قرار می‌دهند.
dirtyWidth اختیاری. عرضی که برای نقاشی تصویر بر روی کانواس استفاده می‌شود.
dirtyHeight اختیاری. ارتفاعی که برای نقاشی تصویر بر روی کانواس استفاده می‌شود.

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی هستند که این ویژگی را کاملاً پشتیبانی می‌کنند.

کروم اینجر فایرفاکس سافاری اپرا
کروم اینجر فایرفاکس سافاری اپرا
4.0 9.0 3.6 4.0 10.1

نکته:نسخه‌های 8 اینترنت اکسپلورر و قدیمی‌تر از عنصر <canvas> پشتیبانی نمی‌کنند.

دستورالعمل‌های کانواس HTML5