Moved from crop to extent for filling images

CHANGELOG.md

@@ -1,4 +1,6 @@
 # image-diff changelog
+1.4.0 - Moved from `crop` to `extent`. Fixes #32 indirectly
+
 1.3.0 - Fixed support for fractional differences via @jacobp100 in #29
 
 1.2.0 - Added support for showing shadow image in diff image via @064678147 in #25

lib/image-diff.js

@@ -1,4 +1,5 @@
 // Load in our dependencies
+var assert = require('assert');
 var fs = require('fs');
 var path = require('path');
 var async = require('async');
@@ -8,25 +9,25 @@ var mkdirp = require('mkdirp');
 var tmp = require('tmp');
 
 // Define custom resize function
-// Taken from https://github.com/twolfson/twolfson.com/blob/3.4.0/test/perceptual-tests/twolfson.com_test.js#L88-L107
-// TODO: Make image resizing its own library
-// DEV: This does not pollute gm.prototype
-gm.prototype.fillFromTo = function (params) {
+function transparentExtent(gm, params) {
+  // Assert we received our parameters
+  assert.notEqual(params.width, undefined);
+  assert.notEqual(params.height, undefined);
+
   // Fill in new space with white background
   // TODO: Parameterize background color (should be considered 'transparent' color in this case)
-  this.borderColor('transparent');
-  this.border(Math.max(params.toWidth - params.fromWidth, 0), Math.max(params.toHeight - params.fromHeight, 0));
+  gm.background('transparent');
 
   // Anchor image to upper-left
   // TODO: Parameterize anchor point
-  this.gravity('SouthEast');
+  gm.gravity('NorthWest');
 
   // Specify new image size
-  this.crop(params.toWidth, params.toHeight, 0, 0);
+  gm.extent(params.width, params.height);
 
-  // Return this instance
-  return this;
-};
+  // Return gm instance for a fluent interface
+  return gm;
+}
 
 function ImageDiff() {
 }
@@ -150,11 +151,9 @@ ImageDiff.prototype = {
 
               // Otherwise, resize the image
               actualTmpPath = filepath;
-              gm(actualPath).fillFromTo({
-                fromWidth: actualSize.width,
-                fromHeight: actualSize.height,
-                toWidth: maxWidth,
-                toHeight: maxHeight
+              transparentExtent(gm(actualPath), {
+                width: maxWidth,
+                height: maxHeight
               }).write(actualTmpPath, cb);
             });
           },
@@ -171,11 +170,9 @@ ImageDiff.prototype = {
                 gm(maxWidth, maxHeight, 'transparent').write(expectedTmpPath, cb);
               // Otherwise, resize the image
               } else {
-                gm(expectedPath).fillFromTo({
-                  fromWidth: expectedSize.width,
-                  fromHeight: expectedSize.height,
-                  toWidth: maxWidth,
-                  toHeight: maxHeight
+                transparentExtent(gm(expectedPath), {
+                  width: maxWidth,
+                  height: maxHeight
                 }).write(expectedTmpPath, cb);
               }
             });

test/image-diff_test.js

@@ -117,6 +117,18 @@ describe('image-diff', function () {
     });
   });
 
+  describe('diffing the same image where 1 has a transparent background', function () {
+    runImageDiff({
+      actualImage: __dirname + '/test-files/checkerboard-transparent.png',
+      expectedImage: __dirname + '/test-files/checkerboard.png',
+      diffImage: __dirname + '/actual-files/different-transparent.png'
+    });
+
+    it('asserts images are the different', function () {
+      assert.strictEqual(this.imagesAreSame, false);
+    });
+  });
+
   describe('diffing images with shadow on', function() {
     runImageDiff({
       actualImage: __dirname + '/test-files/checkerboard-excess.png',