mobile out of memory optimisation for decoding large images

Author: Kunjesh Kumar

src/imageLoader/decodeJPEGBaseline8BitColor.js

@@ -43,14 +43,27 @@ function decodeJPEGBaseline8BitColor(imageFrame, pixelData, canvas) {
     fileReader.onload = function() {
       const img = new Image();
 
-      img.onload = function() {
+      img.onload = function () {
+
+        const maxSize = Math.max(
+          img.height,
+          img.width
+        )
+        const maxSizeThresh = 1000
+
+        if (maxSize > maxSizeThresh) {
+          const ratio = maxSizeThresh / maxSize
+          img.width   *= ratio
+          img.height  *= ratio
+        }
+
         canvas.height = img.height;
         canvas.width = img.width;
         imageFrame.rows = img.height;
         imageFrame.columns = img.width;
         const context = canvas.getContext('2d');
 
-        context.drawImage(this, 0, 0);
+        context.drawImage(this, 0, 0,img.width,img.height);
         const imageData = context.getImageData(0, 0, img.width, img.height);
         const end = new Date().getTime();
 

src/webWorker/decodeTask/decodeTask.js

@@ -58,6 +58,40 @@ function handler(data, doneCallback) {
     );
   }
 
+  // snippet for resizing the image pixel data for Mobile
+  if (imageFrame.samplesPerPixel === 1) {
+    const maxSize = Math.max(imageFrame.columns, imageFrame.rows);
+    const maxSizeThresh = 1000;
+    if (maxSize > maxSizeThresh) {
+      const factor = maxSize / maxSizeThresh;
+      const width = imageFrame.columns; // width is columns
+      const height = imageFrame.rows;
+      const newWidth = Math.floor(width / factor);
+      const newHeight = Math.floor(height / factor);
+
+      // create new array same type as original
+      const resizedPixelData = new imageFrame.pixelData.constructor(
+        newWidth * newHeight
+      );
+      // resize using nearest neighbour interpolation
+      for (let i = 0; i < resizedPixelData.length; i++) {
+        const x = i % newWidth;
+        const y = Math.floor(i / newWidth);
+
+        const projX = Math.floor(x * factor);
+        const projY = Math.floor(y * factor);
+        const projI = projX + projY * width;
+
+        resizedPixelData[i] = imageFrame.pixelData[projI];
+      }
+
+      imageFrame.columns = newWidth;
+      imageFrame.rows = newHeight;
+      imageFrame.pixelData = resizedPixelData;
+      imageFrame.pixelDataLength = resizedPixelData.length;
+    }
+  }
+
   calculateMinMax(imageFrame, strict);
 
   // convert from TypedArray to ArrayBuffer since web workers support passing ArrayBuffers but not