diff --git a/CHANGELOG.md b/CHANGELOG.md index 6d880ab..cc44462 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/lib/image-diff.js b/lib/image-diff.js index 14b4786..1c56aad 100644 --- a/lib/image-diff.js +++ b/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); } }); diff --git a/test/image-diff_test.js b/test/image-diff_test.js index 65a774e..d4e54ca 100644 --- a/test/image-diff_test.js +++ b/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', diff --git a/test/test-files/checkerboard-transparent.png b/test/test-files/checkerboard-transparent.png new file mode 100644 index 0000000..3c13854 Binary files /dev/null and b/test/test-files/checkerboard-transparent.png differ