Canvas putImageData() ਮੰਥਨ

دستورالعمل Canvas

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

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);
}

ਸਵੈ ਸਿਖਲਾਈ ਦੇਣਾ

ਵਿਧੀ

context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

ਪੈਰਾਮੀਟਰ ਮੁੱਲ

ਪੈਰਾਮੀਟਰ ਵਰਣਨ
imgData ਕੈਂਵਾਸ 'ਤੇ ਵਾਪਸ ਲਿਆਉਣ ਵਾਲਾ ImageData ਵਸਤੂ
x ImageData ਵਸਤੂ ਦੇ ਉੱਚੇ ਸਿਧਾਰਤ ਦਿਸ਼ਾ (x) ਦਾ ਸਥਾਨ ਪਿਕਸਲਾਂ ਵਿੱਚ
y ImageData ਵਸਤੂ ਦੇ ਉੱਚੇ ਪਹਿਲੇ ਪਰਵਾਰਤ ਦਿਸ਼ਾ (y) ਦਾ ਸਥਾਨ ਪਿਕਸਲਾਂ ਵਿੱਚ
dirtyX ਵਿਕਲਪਿਤ।ਪਹਿਲੀ ਸਿਧਾਰਤ ਦਿਸ਼ਾ (x) ਨੂੰ ਪਿਕਸਲਾਂ ਵਿੱਚ ਹਾਂਡੇ ਕੈਂਵਾਸ 'ਤੇ ਚਿੱਤਰ ਲਗਾਉਣ ਦਾ ਸਥਾਨ
dirtyY ਵਿਕਲਪਿਤ।ਪਹਿਲੀ ਪਰਵਾਰਤ ਦਿਸ਼ਾ (y) ਨੂੰ ਪਿਕਸਲਾਂ ਵਿੱਚ ਹਾਂਡੇ ਕੈਂਵਾਸ 'ਤੇ ਚਿੱਤਰ ਲਗਾਉਣ ਦਾ ਸਥਾਨ
dirtyWidth ਵਿਕਲਪਿਤ।ਕੈਂਵਾਸ 'ਤੇ ਚਿੱਤਰ ਦਰਸਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਣ ਵਾਲਾ ਚੌਡਾਈ
dirtyHeight ਵਿਕਲਪਿਤ।ਕੈਂਵਾਸ 'ਤੇ ਚਿੱਤਰ ਦਰਸਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਣ ਵਾਲਾ ਹਾਈਟ

ਬਰਾਊਜ਼ਰ ਸਪੋਰਟ

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

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

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

دستورالعمل Canvas