روش putImageData() کanvas

منوی کانواس

تعریف و استفاده

putImageData() روشی است که داده‌های تصویر را (از ImageData مشخص شده) بر روی کanvas قرار می‌دهد.

نکته:لطفاً ببینید getImageData() روشی است که می‌تواند داده‌های پیکسلی مربع مشخص شده بر روی کanvas را کپی کند.

نکته:لطفاً ببینید createImageData() روشی است که می‌تواند ImageData خالی جدیدی ایجاد کند.

مثال

این کد از طریق getImageData() داده‌های پیکسلی مربع مشخص شده بر روی کanvas را کپی می‌کند، سپس داده‌های تصویر را با استفاده از putImageData() بر روی کanvas قرار می‌دهد:

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 مورد نظر برای قرار دادن آن بر روی کanvas.
x مقیاس x گوشه بالا چپ ImageData به پیکسل.
y مقیاس y گوشه بالا چپ ImageData به پیکسل.
dirtyX اختیاری. مقیاس افقی (x)، به پیکسل، مکانی که تصویر بر روی کanvas قرار می‌گیرد.
dirtyY اختیاری. مقیاس افقی (y)، به پیکسل، مکانی که تصویر بر روی کanvas قرار می‌گیرد.
dirtyWidth اختیاری. عرضی که در آن تصاویر بر روی کanvas نقاشی می‌شوند.
dirtyHeight اختیاری. ارتفاعی که در آن تصاویر بر روی کanvas نقاشی می‌شوند.

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

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

منوی کانواس