طريقة putImageData() على Canvas

دليل مرجعي لـ Canvas

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

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

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

نصيحة:انظر أيضًا createImageData() الطريقة التي يمكن بها إنشاء Object 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 يحدد Object ImageData الذي سيتم وضعها على اللوحة.
x موقع x للجزء العلوي الايسر من Object ImageData، بالبكسل.
y موقع y للجزء العلوي الايسر من Object ImageData، بالبكسل.
dirtyX اختياري. القيمة الأفقية (x)، بالبكسل، لموضع الصورة على اللوحة.
dirtyY اختياري. القيمة الأفقية (y)، بالبكسل، لموضع الصورة على اللوحة.
dirtyWidth اختياري. العرض المستخدم في رسم الصورة على اللوحة.
dirtyHeight اختياري. الارتفاع المستخدم في رسم الصورة على اللوحة.

المتصفح يدعم

رقم في الجدول هو إصدار المتصفح الأول الذي يدعم هذه الخاصية بشكل كامل.

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

ملاحظة:لا يدعم متصفح Internet Explorer 8 وأحدث إصداراته عنصر <canvas>.

دليل مرجعي لـ Canvas