Merge pull request #2 from happo/add-max-diff

Add maxDiff to return value

Author: trotzig

src/__tests__/createDiffImage-test.js

@@ -0,0 +1,33 @@
+const crypto = require('crypto');
+const path = require('path');
+
+const Jimp = require('jimp');
+
+const computeAndInjectDiffs = require('../computeAndInjectDiffs');
+const createDiffImage = require('../createDiffImage');
+
+let image1;
+let image2;
+let subject;
+
+beforeEach(async () => {
+  image1 = (await Jimp.read(
+    'https://dummyimage.com/200/000/ffffff.png&text=aa',
+  )).bitmap;
+  image2 = (await Jimp.read(
+    'https://dummyimage.com/200/000/f7f7f7.png&text=aa',
+  )).bitmap;
+  subject = () =>
+    createDiffImage(
+      computeAndInjectDiffs({
+        image1,
+        image2,
+      }),
+    );
+});
+
+it('has a total diff value and a max diff', async () => {
+  const { maxDiff, diff } = await subject();
+  expect(maxDiff).toEqual(0.027169424432452977);
+  expect(diff).toEqual(0.00043751263781383705);
+});

src/__tests__/index-test.js

@@ -34,3 +34,9 @@ it('produces a trace svg', () => {
   const img = subject();
   expect(img.trace.toSVG()).toMatch(/<svg.*viewBox="0 0 100 100".*<\/svg>/);
 });
+
+it('has meta-data', () => {
+  const img = subject();
+  expect(img.diff).toEqual(0.1991598705880487);
+  expect(img.maxDiff).toEqual(1);
+});

src/createDiffImage.js

@@ -15,6 +15,7 @@ module.exports = function createDiffImage({ image1Data, image2Data }) {
   const data = new Uint8ClampedArray(width * height);
   const trace = new DiffTrace({ width, height });
   let totalDiff = 0;
+  let maxDiff = 0;
 
   for (let row = 0; row < height; row += 1) {
     // Render image
@@ -35,6 +36,9 @@ module.exports = function createDiffImage({ image1Data, image2Data }) {
       );
 
       totalDiff += diff;
+      if (diff > maxDiff) {
+        maxDiff = diff;
+      }
 
       /* eslint-disable prefer-destructuring */
       if (diff > 0) {
@@ -58,7 +62,8 @@ module.exports = function createDiffImage({ image1Data, image2Data }) {
   }
 
   return {
-    diff: totalDiff / (width + height),
+    diff: totalDiff / (width * height),
+    maxDiff,
     trace,
     data,
     width: width / 4,

src/euclideanDistance.js

@@ -1,11 +1,14 @@
+const MAX_EUCLIDEAN_DISTANCE = Math.sqrt(255 ** 2 * 4);
 
 function euclideanDistance(rgba1, rgba2) {
-  return Math.sqrt(((rgba1[0] - rgba2[0]) ** 2)
-                 + ((rgba1[1] - rgba2[1]) ** 2)
-                 + ((rgba1[2] - rgba2[2]) ** 2)
-                 + ((rgba1[3] - rgba2[3]) ** 2));
+  return (
+    Math.sqrt(
+      (rgba1[0] - rgba2[0]) ** 2 +
+        (rgba1[1] - rgba2[1]) ** 2 +
+        (rgba1[2] - rgba2[2]) ** 2 +
+        (rgba1[3] - rgba2[3]) ** 2,
+    ) / MAX_EUCLIDEAN_DISTANCE
+  );
 }
 
-euclideanDistance.MAX_EUCLIDEAN_DISTANCE = Math.sqrt((255 ** 2) * 4);
-
 module.exports = euclideanDistance;

src/getDiffPixel.js

@@ -1,6 +1,5 @@
 const compose = require('./compose');
 const euclideanDistance = require('./euclideanDistance');
-const { MAX_EUCLIDEAN_DISTANCE } = require('./euclideanDistance');
 
 const TRANSPARENT = [0, 0, 0, 0];
 
@@ -15,7 +14,7 @@ module.exports = function getDiffPixel(previousPixel, currentPixel) {
   // Delta E in Lab colorspace, we probably don't need perceptual accuracy for
   // this application, and it is nice to avoid the overhead of converting RGBA
   // to Lab.
-  const diff = euclideanDistance(previousPixel, currentPixel) / MAX_EUCLIDEAN_DISTANCE;
+  const diff = euclideanDistance(previousPixel, currentPixel);
   if (diff === 0) {
     if (currentPixel[3] === 0) {
       return {

src/index.js

@@ -9,11 +9,11 @@ function imageDiff(image1, image2, { hashFunction } = {}) {
     hashFunction,
   });
 
-  const { data, width, height, diff, trace } = createDiffImage({
+  const { data, width, height, diff, trace, maxDiff } = createDiffImage({
     image1Data,
     image2Data,
   });
-  return { data, width, height, diff, trace };
+  return { data, width, height, diff, trace, maxDiff };
 }
 
 imageDiff.DIFF_TRACE_PADDING = DIFF_TRACE_PADDING;