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

Question

我有一个 ImageData 对象，它包含所有监视器的屏幕截图，因此它是一个巨大的 ImageData。我现在想每次画一个显示器。我有所有的显示器尺寸。

所以我正在尝试使用 ctx.putImageData(myImgDat, topLeftMonX, topLeftMonY, monWidth, monHeight) 但它不起作用，我不认为我理解文档中看到的肮脏概念: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData#Understanding_putImageData

是否可以将部分 imgaedata 绘制到 Canvas 上？

Answer 1

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

作为MDN CanvasRenderingContext2D.putImageData()描述，它接受 3 或 7 参数，你必须传递 3 或 7，否则，在你的例如，monWidth 和 monHeight 将用作 dirtyX 和 dirtyY 而不是 dirtyWidth和 dirtyHeighy。你的代码可能会做

1. 复制 rect(monWidth, monHeight, IMAGEDATA_WIDTH, IMAGEDATA_HEIGHT)。
2. 将其放在 Canvas 的 rect(topLeftMonX + monWidth, topLeftMonY + monHeight, IMAGEDATA_WIDTH, IMAGEDATA_HEIGHT) 上。

因此，将目标区域放在目标 Canvas 的 (0,0) 中并不是很直接，要通过给定条件实现，您可能必须这样做:

1. 首先将 imageData 的 (0,0) 移动到目标 Canvas 的 (-topLeftMonX,
-topLeftMonY).
2. 然后开始将 imageData 放在 imageData 的 (topLeftMonX, topLeftMonY) 上，它现在位于 Canvas 的 (0, 0) 位置。
3. 矩形大小将为 topLeftMonX x topLeftMonY。

ctx.putImageData(myImgDat,-topLeftMonX, -topLeftMonY, topLeftMonX, topLeftMonY, monWidth, monHeight);

上面的代码会将 myImgDat 上的 rect(topLeftMonX, topLeftMonY, monWidth, monHeight) 复制到: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>