روش putImageData() کانواس HTML

دستورالعمل‌های کanvas 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 که باید به ک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 و قدیمی‌تر اینترنت اکسپلورر از عنصر <canvas> پشتیبانی نمی‌کنند.

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