optional downsampling + prepare adding histograms charts

Author: jo-chemla

public/histogram-matching-js.html

@@ -112,17 +112,24 @@ <h3>Pure JS, client-side, Histogram Matching</h3>
 
 // helper for uint8 histograms
 function getNormalizedCdfUint8(arr) {
-  return cumsum(bincount(arr, 256, 0, 255, true));
+  const bincounts = bincount(arr, 256, 0, 255, true)
+  const cdf = cumsum(bincounts)
+  return { bincounts, cdf };
 }
 
 // compute mapping between source and target
 export function matchCumulativeCdf(source, target) {
   const srcCdf = getNormalizedCdfUint8(source);
   const tgtCdf = getNormalizedCdfUint8(target);
   const values = Array.from({ length: 256 }, (_, i) => i);
+  const mapping = interp(srcCdf.cdf, tgtCdf.cdf, values)
 
   // For each source intensity, find the CDF value, then find which target intensity has the closest CDF value.
-  return interp(srcCdf, tgtCdf, values);
+  return {
+    mapping, 
+    srcHist: srcCdf.bincounts, 
+    tgtHist: tgtCdf.bincounts
+  };
 }
 
 // ------------------- high-level API -------------------
@@ -134,20 +141,29 @@ <h3>Pure JS, client-side, Histogram Matching</h3>
  *
  * @param {Uint8Array} source - Source image array (flat 1D, 1/3/4 channels interleaved).
  * @param {Uint8Array} target - Target image array (same shape/channels as source).
- * @param Number channels - count of channels to do correct de-interleaving of RGB channels values.
+ * @param {Number} channels - count of channels to do correct de-interleaving of RGB channels values.
  * @param {'MAPPING'|'MATCHED_DATA'} returnType - Whether to return mappings or matched data.
+ * @param {Number} maxMpx - Whether to subsample/apply downscaling to source/target image rasters If pixelCount > maxMpx. 1 = 100% res, 2 = 2x downsampling/subsampling
  * @returns {{mappings: Float64Array[], matched?: Uint8Array}}
  */
-export function matchHistograms(source, target, channels = 3, returnType = 'MATCHED_DATA') {
-//   const channels = source.length % 4 === 0 ? 4 :
-//                    source.length % 3 === 0 ? 3 : 1;
+export function matchHistograms(source, target, channels = 3, returnType = 'MATCHED_DATA', maxMpx=-1) {
+  // Downsample source and target arrays in case they exceed user-defined maxMpx param
+  let srcDownsample = 1, tgtDownsample = 1;
+  if (maxMpx > 0) {
+    // srcDownsample = Math.max(1, Math.ceil((source.length / channels / 1e6) / maxMpx))
+    // tgtDownsample = Math.max(1, Math.ceil((source.length / channels / 1e6) / maxMpx))
+    srcDownsample = Math.ceil((source.length / channels / 1e6) / maxMpx)
+    tgtDownsample = Math.ceil((source.length / channels / 1e6) / maxMpx)
+    console.log('Downsampling factors', srcDownsample, tgtDownsample)
+  }
+
   // RGB / RGBA
   const mappings = [];
   for (let c = 0; c < Math.min(3, channels); c++) {
       const srcChannel = [];
       const tgtChannel = [];
-      for (let i = c; i < source.length; i += channels) srcChannel.push(source[i]);
-      for (let i = c; i < target.length; i += channels) tgtChannel.push(target[i]);
+      for (let i = c; i < source.length; i += channels * srcDownsample) srcChannel.push(source[i]);
+      for (let i = c; i < target.length; i += channels * tgtDownsample) tgtChannel.push(target[i]);
       mappings[c] = matchCumulativeCdf(srcChannel, tgtChannel);
   }
   console.log('mappings', mappings)
@@ -156,26 +172,27 @@ <h3>Pure JS, client-side, Histogram Matching</h3>
   const out = new Uint8Array(source.length);
   for (let i = 0; i < source.length; i += channels) {
     for (let c = 0; c < 3; c++) {
-      out[i + c]     = mappings[0 + c][source[i + c]];
+      out[i + c] = mappings[0 + c].mapping[source[i + c]];
     }
     if (channels === 4) out[i + 3] = source[i + 3]; // keep alpha
   }
   return {mappings, matched: out};
 }
 
-
-
 // --- image handling ---
 const img_objs = {};
 // slot is source or target, indexing img_objs, mapped to input and img slot+"-img-div
-function loadImage(fileOrUrl, slot) {
+function loadImage(fileOrUrl, slot, maxMpx=-1) { // TODO 2 is for testing default downscale = 1
   const img = new Image();
   img.onload = function() {
     const canvas = document.createElement("canvas");
+    // naturalWidth / downscale to make canvas smaller and downsample naturally, downscale = 2 is nicer, but then would need to use source input and re-apply mapping, so passed source resolution instead
     canvas.width = img.naturalWidth;   // naturalWidth instead of width
     canvas.height = img.naturalHeight; // naturalHeight instead of height
     const ctx = canvas.getContext("2d");
-    ctx.drawImage(img, 0, 0);
+    ctx.drawImage(img, 0, 0); // rescale image
+    // ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // rescale image
+
     img_objs[slot] = {ctx, img, canvas};
     document.getElementById(slot+"-img-div").replaceChildren(img);
 
@@ -189,7 +206,7 @@ <h3>Pure JS, client-side, Histogram Matching</h3>
       // Match Histograms Computation
       // Check getImageData always return 4 channels RGBA 
       const start = Date.now();
-      const matched = matchHistograms(sourceArr, targetArr, 4, 'MATCHED_DATA');
+      const matched = matchHistograms(sourceArr, targetArr, 4, 'MATCHED_DATA', maxMpx);
       const elapsed_ms = Date.now() - start
 
       // Write matched image to outCanvas
@@ -204,7 +221,8 @@ <h3>Pure JS, client-side, Histogram Matching</h3>
       // Display to user and log stats
       const container = document.getElementById('matched-img-div');
       console.log('matched', matched, 'mappings slice')
-      console.log(matched.mappings[0].slice(0, 30))
+      console.log(matched.mappings[0].mapping.slice(0, 30))
+
       const stats_div = document.createElement("pre");
       const statsObj = {
         source: {
@@ -228,12 +246,21 @@ <h3>Pure JS, client-side, Histogram Matching</h3>
 
       // container.replaceChildren(outCanvas);
       outCanvas.toBlob(function(blob) {
+        // Add image resulting from histogram matching to output div
         const url = URL.createObjectURL(blob);
         const img = document.createElement("img");
         img.src = url;
         container.replaceChildren(img);
 
-        container.appendChild(stats_div)
+        // Also show some stats
+        const stats_details = document.createElement('details');
+        stats_details.style = "text-align: left;"
+        const summary = document.createElement("summary");
+        summary.textContent = "Show stats";
+        stats_details.appendChild(summary);
+        stats_details.appendChild(stats_div);
+        stats_details.open = true;
+        container.appendChild(stats_details)
       }, "image/png");
 
     }