Assume background color when adding padding

When two images aren't matching sizes, we add placeholder transparent
pixels. This works in many cases, but when the two images are very
different, the diff tends to put a giant block of magenta either at the
top or the bottom, hiding "real" content underneath. To fix this, I'm
making the placeholder transparent pixels grayish, blended with the
background color, which is assumed to be the top leftmost pixel.

The assumption about the top left pixel could prove too naive, but for
now it's better than the previous approach which included making a
transparent black pixel.

Author: trotzig

snapshots/different-widths/after.png

@@ -1,4 +1,5 @@
 const alignArrays = require('./alignArrays');
+const compose = require('./compose');
 const similarEnough = require('./similarEnough');
 
 function imageTo2DArray({ data, width, height }, paddingRight) {
@@ -8,9 +9,9 @@ function imageTo2DArray({ data, width, height }, paddingRight) {
 
   const newData = [];
   for (let row = 0; row < height; row += 1) {
-    const pixelsInRow = new Uint8ClampedArray(rowSize + (paddingRight * 4));
+    const pixelsInRow = new Uint8ClampedArray(rowSize + paddingRight * 4);
     for (let location = 0; location < rowSize; location += 1) {
-      pixelsInRow[location] = data[(row * rowSize) + location];
+      pixelsInRow[location] = data[row * rowSize + location];
     }
     newData.push(pixelsInRow);
   }
@@ -40,40 +41,39 @@ function hashFn() {
 
 const HASH_FN = hashFn();
 
-function align({
-  image1Data,
-  image2Data,
-  maxWidth,
-  hashFunction,
-}) {
+function transparentLine(rawBgPixel, width) {
+  const bgPixel = compose([200, 200, 200, 50], rawBgPixel);
+  const result = new Uint8ClampedArray(width * 4);
+  for (let i = 0; i < width * 4; i += 4) {
+    result[i] = bgPixel[0];
+    result[i + 1] = bgPixel[1];
+    result[i + 2] = bgPixel[2];
+    result[i + 3] = 122;
+  }
+  return result;
+}
+
+function align({ image1Data, image2Data, maxWidth, hashFunction }) {
   if (similarEnough({ image1Data, image2Data })) {
     return;
   }
 
   const hashedImage1Data = image1Data.map(hashFunction);
   const hashedImage2Data = image2Data.map(hashFunction);
 
-  alignArrays(
-    hashedImage1Data,
-    hashedImage2Data,
-  );
-
-  const transparentLine = new Uint8ClampedArray(maxWidth * 4);
-  for (let i = 0; i < maxWidth * 4; i++) {
-    if ((i + 1) % 4 !== 0) {
-      transparentLine[i] = 1;
-    }
-  }
+  alignArrays(hashedImage1Data, hashedImage2Data);
 
+  const image1Bg = image1Data[0].slice(0, 4);
   hashedImage1Data.forEach((hashedLine, i) => {
     if (hashedLine === alignArrays.PLACEHOLDER) {
-      image1Data.splice(i, 0, transparentLine);
+      image1Data.splice(i, 0, transparentLine(image1Bg, maxWidth));
     }
   });
 
+  const image2Bg = image2Data[0].slice(0, 4);
   hashedImage2Data.forEach((hashedLine, i) => {
     if (hashedLine === alignArrays.PLACEHOLDER) {
-      image2Data.splice(i, 0, transparentLine);
+      image2Data.splice(i, 0, transparentLine(image2Bg, maxWidth));
     }
   });
 }
@@ -90,7 +90,11 @@ function align({
  * @param {Array} image2
  * @return {Object}
  */
-module.exports = function computeAndInjectDiffs({ image1, image2, hashFunction = HASH_FN }) {
+module.exports = function computeAndInjectDiffs({
+  image1,
+  image2,
+  hashFunction = HASH_FN,
+}) {
   const maxWidth = Math.max(image1.width, image2.width);
 
   const image1Data = imageTo2DArray(image1, maxWidth - image1.width);