From 2a43adf61e2bcb1492b842c3c86506e85b7cc1dd Mon Sep 17 00:00:00 2001 From: Mikael Finstad Date: Thu, 24 Sep 2020 12:59:29 +0200 Subject: [PATCH] Change Uint8ClampedArray creation Due to alleged performance improvements See #47 #48 --- sources/fabric.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/sources/fabric.js b/sources/fabric.js index e55d1a9..cbf012e 100644 --- a/sources/fabric.js +++ b/sources/fabric.js @@ -30,12 +30,23 @@ async function renderFabricCanvas(canvas) { return rgba; } +function toUint8ClampedArray(buffer) { + // return Uint8ClampedArray.from(buffer); + // Some people are finding that manual copying is orders of magnitude faster than Uint8ClampedArray.from + // Since I'm getting similar times for both methods, then why not: + const data = new Uint8ClampedArray(buffer.length); + for (let i = 0; i < buffer.length; i += 1) { + data[i] = buffer[i]; + } + return data; +} + async function rgbaToFabricImage({ width, height, rgba }) { const canvas = nodeCanvas.createCanvas(width, height); const ctx = canvas.getContext('2d'); // https://developer.mozilla.org/en-US/docs/Web/API/ImageData/ImageData // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData - ctx.putImageData(new nodeCanvas.ImageData(Uint8ClampedArray.from(rgba), width, height), 0, 0); + ctx.putImageData(new nodeCanvas.ImageData(toUint8ClampedArray(rgba), width, height), 0, 0); // https://stackoverflow.com/questions/58209996/unable-to-render-tiff-images-and-add-it-as-a-fabric-object return new fabric.Image(canvas); }