Added clipping area; added buffer for efficient memory-allocations;

src/input/PixelCapture.js

@@ -1,8 +1,10 @@
+import {memoize} from 'lodash';
 import {
-    computeGray
+    computeGray,
+    computeImageArea,
 } from '../common/cv_utils';
-import {sleep} from '../common/utils';
-import {getViewport} from '../common/utils';
+import {sleep, getViewport} from '../common/utils';
+import {aquire} from '../common/buffers';
 
 function adjustCanvasSize(input, canvas) {
     if (input instanceof HTMLVideoElement) {
@@ -43,7 +45,6 @@ export function fromSource(source, {target = "#interactive.viewport"} = {}) {
     var drawable = source.getDrawable();
     var $canvas = null;
     var ctx = null;
-    var bytePool = [];
 
     if (drawable instanceof HTMLVideoElement
           || drawable instanceof HTMLImageElement) {
@@ -56,24 +57,14 @@ export function fromSource(source, {target = "#interactive.viewport"} = {}) {
         ctx = drawable.getContext('2d');
     }
 
-    function nextAvailableBuffer() {
-        var i;
-        var buffer;
-        var bytesRequired = ($canvas.height * $canvas.width);
-        for (i = 0; i < bytePool.length; i++) {
-            buffer = bytePool[i];
-            if (buffer && buffer.buffer.byteLength === bytesRequired) {
-                return bytePool[i];
-            }
-        }
-        buffer = new Uint8Array(bytesRequired);
-        bytePool.push(buffer);
-        console.log("Added new entry to bufferPool", bytesRequired);
-        return buffer;
+    function nextAvailableBuffer(bytesRequired) {
+        return new Uint8Array(aquire(bytesRequired));
     }
 
+
+
     return {
-        grabFrameData: function grabFrameData({buffer, clipping}) {
+        grabFrameData: function grabFrameData({clipping} = {}) {
             const {viewport, canvas: canvasSize} = source.getDimensions();
             const sx = viewport.x;
             const sy = viewport.y;
@@ -84,20 +75,38 @@ export function fromSource(source, {target = "#interactive.viewport"} = {}) {
             const dWidth = canvasSize.width;
             const dHeight = canvasSize.height;
 
+            console.time("clipp")
+
+            clipping = clipping ? clipping(canvasSize) : {
+                x: 0,
+                y: 0,
+                width: canvasSize.width,
+                height: canvasSize.height,
+            };
+
             adjustCanvasSize(canvasSize, $canvas);
             if ($canvas.height < 10 || $canvas.width < 10) {
-                console.log('$canvas not initialized. Waiting 100ms and then continuing');
                 return sleep(100).then(grabFrameData);
             }
             if (!(drawable instanceof HTMLCanvasElement)) {
                 ctx.drawImage(drawable, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
             }
-            var imageData = ctx.getImageData(0, 0, $canvas.width, $canvas.height).data;
-            var imageBuffer = buffer ? buffer : nextAvailableBuffer();
+            var imageData = ctx.getImageData(
+                clipping.x,
+                clipping.y,
+                clipping.width,
+                clipping.height
+            ).data;
+            var imageBuffer = nextAvailableBuffer(clipping.width * clipping.height);
             computeGray(imageData, imageBuffer);
             return Promise.resolve({
-                width: $canvas.width,
-                height: $canvas.height,
+                width: clipping.width,
+                height: clipping.height,
+                dimensions: {
+                    viewport,
+                    canvas: canvasSize,
+                    clipping,
+                },
                 data: imageBuffer,
             });
         },