Implementing faster way to merge frames

sources/fabricFrameSource.js

@@ -1,6 +1,7 @@
 const { fabric } = require('fabric');
 const fileUrl = require('file-url');
 const nodeCanvas = require('canvas');
+const { toArrayInteger } = require("../util");
 
 const { createCanvas } = nodeCanvas;
 
@@ -35,7 +36,7 @@ async function mergeFrames({ width, height, framesRaw }) {
     const ctx2 = canvas2.getContext('2d');
     // https://developer.mozilla.org/en-US/docs/Web/API/ImageData/ImageData
     // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData
-    ctx2.putImageData(new nodeCanvas.ImageData(Uint8ClampedArray.from(frameRaw), width, height), 0, 0);
+    ctx2.putImageData(new nodeCanvas.ImageData(toArrayInteger(frameRaw), width, height), 0, 0);
     // require('fs').writeFileSync(`${Math.floor(Math.random() * 1e12)}.png`, canvas2.toBuffer('image/png'));
 
     ctx.drawImage(canvas2, 0, 0);

util.js

@@ -1,5 +1,15 @@
 const execa = require('execa');
 
+function toArrayInteger(buffer) {
+  if (buffer.length > 0) {
+      const data = new Uint8ClampedArray(buffer.length);
+      for (let i = 0; i < buffer.length; i=i+1)
+          data[i] = buffer[i];
+      return data;
+  }
+  return [];
+}
+
 function parseFps(fps) {
   const match = typeof fps === 'string' && fps.match(/^([0-9]+)\/([0-9]+)$/);
   if (match) {
@@ -34,4 +44,5 @@ module.exports = {
   parseFps,
   readFileInfo,
   multipleOf2,
+  toArrayInteger
 };