HTML canvas putImageData() ਮੰਥਨ

HTML5 Canvas ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ

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

putImageData() ਮੰਥਨ ਕਿਉਂਕਿ ਨਿਰਧਾਰਿਤ ImageData ਆਬਜੈਕਟ ਦੇ ਪਿਕਸਲ ਡਾਟਾ ਨੂੰ ਕੰਵੈਸ ਉੱਤੇ ਪਾਲਣ ਕਰਦਾ ਹੈ。

ਸੁਝਾਅ:ਦੇਖੋ getImageData() ਮੰਥਨ, ਜੋ ਕਿ ਕੰਵੈਸ ਉੱਤੇ ਨਿਰਧਾਰਿਤ ਚੌਕਸ ਦੇ ਪਿਕਸਲ ਡਾਟਾ ਨੂੰ ਕਾਪੀ ਕਰਦਾ ਹੈ。

ਸੁਝਾਅ:ਦੇਖੋ createImageData() ਮੰਥਨ, ਜੋ ਨਵਾਂ ਖਾਲੀ ImageData ਆਬਜੈਕਟ ਬਣਾ ਸਕਦਾ ਹੈ。

ਉਦਾਹਰਣ

ਹੇਠ ਲਿਖੇ ਕੋਡ ਵੱਲੋਂ getImageData() ਮੁਹਿੰਮ ਉੱਤੇ ਨਿਰਧਾਰਿਤ ਚੌਕਸ ਦੇ ਪਿਕਸਲ ਡਾਟਾ ਨੂੰ ਕਾਪੀ ਕਰਦਾ ਹੈ, ਫਿਰ ਉਹ ਕੰਵੈਸ ਉੱਤੇ ਪਿਕਸਲ ਡਾਟਾ ਨੂੰ ਪਾਲਣ ਕਰਦਾ ਹੈ:

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

ਟਿੱਪਣੀਆਂ:Internet Explorer 8 ਅਤੇ ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਦੀਆਂ ਸੰਸਕਰਣਾਂ <canvas> ਐਲੀਮੈਂਟ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਦਿੰਦੇ。

HTML5 Canvas ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ