图像数据对象仅一部分的putImageData

诺蒂达特

我有一个ImageData对象,其中包含所有监视器的屏幕快照,因此它是一个巨大的ImageData。我现在想每次绘制一台显示器。我有所有的显示器尺寸。

因此,我尝试使用ctx.putImageData(myImgDat, topLeftMonX, topLeftMonY, monWidth, monHeight)它,但无法正常工作,我认为我对文档中的肮脏概念没有很好的理解:https : //developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData #Understanding_putImageData

是否可以将imgaedata的一部分绘制到画布上?

冬玉

是的,有可能,它对您的代码不起作用是因为您传递的arugments不符合该函数的格式。

由于MDN CanvasRenderingContext2D.putImageData()描述,它接受37参数,你必须通过任一37,否则,在你的榜样,monWidth并且monHeight将被用作dirtyXdirtyY代替dirtyWidthdirtyHeighy您的代码可能会做

  1. 复制rect(monWidth, monHeight, IMAGEDATA_WIDTH, IMAGEDATA_HEIGHT)
  2. 放在画布上rect(topLeftMonX + monWidth, topLeftMonY + monHeight, IMAGEDATA_WIDTH, IMAGEDATA_HEIGHT)

因此,将目标区域放到(0,0)目标画布上并不是很简单,要通过您的给定条件来实现,您可能需要执行以下操作:

  1. 首先将imageData(0,0)移到目标canvas的(-topLeftMonX, -topLeftMonY)
  2. 然后开始将imageData放在imageData的(topLeftMonX, topLeftMonY)位置(0, 0)该位置现在位于画布的位置
  3. 矩形大小为topLeftMonX x topLeftMonY
ctx.putImageData(myImgDat,-topLeftMonX, -topLeftMonY, topLeftMonX, topLeftMonY, monWidth, monHeight);

上面的代码会将rect(topLeftMonX, topLeftMonY, monWidth, monHeight)on复制myImgDat到:rect(0, 0, monWidth, monHeight)canvas上。

您可以从下面的代码片段中了解它的工作方式。

var canvas = document.getElementById('bigCanvas')
        ,ctx  = canvas.getContext('2d');

var tcanvas = document.getElementById('testCanvas')
        ,tctx  = tcanvas.getContext('2d');

var grd = tctx.createRadialGradient(150, 100, 10, 150, 110, 150);
grd.addColorStop(0, "black");
grd.addColorStop(0.15, "blue");
grd.addColorStop(0.3, "cyan");
grd.addColorStop(0.5, "green");
grd.addColorStop(0.7, "yellow");
grd.addColorStop(0.85, "orange");
grd.addColorStop(1, "red");

tctx.fillStyle = grd;
tctx.fillRect(0, 0, 300, 200);

var imageData = tctx.getImageData(0, 0, 300, 200);
// Move imagedata's origin to (-150, -100) on canvas, 
// start to put data on canvas at imgae data's (150, 100)  and size is 150x100
// => copy rect(150,  100, 150, 100) to canvas' s rect (0,  0, 150, 100)
ctx.putImageData(imageData, -150, -100,  150, 100, 150, 100);

// Move imagedata's origin to (150, 100) on canvas, 
//start to put data on canvas at imgae data's (0, 0)  and and size is 150x100
// => copy rect(0, 0, 150, 100) to canvas' s rect (150,  100, 150, 100)
ctx.putImageData(imageData, 150, 100,  0, 0, 150, 100);

// Move imagedata's origin to (150, -100) on canvas,
// start to put data on canvas at imgae data's (0, 100)  and size is 150x100
// => copy rect(0, 100, 150, 100) to canvas' s rect (150, 0, 150, 100)
ctx.putImageData(imageData, 150, -100,  0, 100, 150, 100);

// Move imagedata's origin to (-150, 100) on canvas,
// start to put data on canvas at imgae data's (200, 0)  and size is 100x100
// => copy rect(200, 0, 150, 100) to canvas' s rect (50, 100, 150, 100)
ctx.putImageData(imageData, -150, 100,  200, 0, 100, 100);
<div>Canvas for put ImageData:</div>
<canvas id="bigCanvas" width="300" height="200"></canvas>
<hr/>
<div>Canvas for get ImageData:</div>
<canvas id="testCanvas" width="300" height="200"></canvas>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章