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 на холст?

Answer 1

Да, возможно, это не работает на вашем коде, потому что ваши прерванные действия не соответствуют формату функции.

Как MDN CanvasRenderingContext2D.putImageData() описывает, он принимает 3 или 7 аргументы, вы должны пройти либо 3 или 7, в противном случае, в вашем примере, monWidth и monHeight будет использоваться в качестве dirtyX и dirtyY вместо dirtyWidth и dirtyHeighy. Код, вероятно, будет

1. Скопируйте rect(monWidth, monHeight, IMAGEDATA_WIDTH, IMAGEDATA_HEIGHT).
2. Наденьте это на холсте rect(topLeftMonX + monWidth, topLeftMonY + monHeight, IMAGEDATA_WIDTH, IMAGEDATA_HEIGHT).

Таким образом, и это как-то не очень прямо, чтобы поставить целевой регион (0,0) целевой холст, чтобы достичь вашего состояния поддавки, вы, возможно, придется сделать:

1. Первый ход ImageData-х (0,0) к target canvas (-topLeftMonX, -topLeftMonY).
2. Затем начните размещать imageData в файле (topLeftMonX, topLeftMonY), который теперь находится в позиции (0, 0) из холста.
3. Размер прямоугольника будет topLeftMonX x topLeftMonY.

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

Код выше скопирует rect(topLeftMonX, topLeftMonY, monWidth, monHeight) на myImgDat в: rect(0, 0, monWidth, monHeight) на холсте.

Вы можете посмотреть, как это работает из фрагмента ниже.

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>

Answer 2

Это еще одно решение:

  var iref = imagedata.data; 

      // start - because took a single screenshot of alllll put togather, lets portion out the imagedata 
      console.time('portion out image data'); 
      for (var i=0; i<collMonInfos.length; i++) { 
       var screenUseW = collMonInfos[i].w; 
       var screenUseH = collMonInfos[i].h; 

       var screnImagedata = new ImageData(screenUseW, screenUseH); 
       var siref = screnImagedata.data; 

       var si = 0; 
       for (var y=collMonInfos[i].y; y<collMonInfos[i].y+screenUseH; y++) { 
        for (var x=collMonInfos[i].x; x<collMonInfos[i].x+screenUseW; x++) { 
         var pix1 = (fullWidth*y*4) + (x * 4); 
         var B = iref[pix1]; 
         siref[si] = iref[pix1+2]; 
         siref[si+1] = iref[pix1+1]; 
         siref[si+2] = B; 
         siref[si+3] = 255; 
         si += 4; 
        } 
       } 
       collMonInfos[i].screenshot = screnImagedata; 
      } 
      console.timeEnd('portion out image data');