diff --git a/README.md b/README.md index 922314e..45d21a3 100644 --- a/README.md +++ b/README.md @@ -104,7 +104,8 @@ await looksSame.createDiff({ current: '/path/to/current/image.png', diff: '/path/to/save/diff/to.png', highlightColor: '#ff00ff', // color to highlight the differences - strict: false, // strict comparsion + transparency: 255, //0-255, controls the alpha channel for unchanged pixels + strict: false, // strict comparison tolerance: 2.5, antialiasingTolerance: 0, ignoreAntialiasing: true, // ignore antialising by default diff --git a/index.js b/index.js index 0566ab6..24c7d65 100644 --- a/index.js +++ b/index.js @@ -77,6 +77,7 @@ const buildDiffImage = async (img1, img2, options) => { const minHeight = Math.min(img1.height, img2.height); const highlightColor = options.highlightColor; + const alphaLevel = isNaN(options.transparency) ? 255 : options.transparency; const resultBuffer = Buffer.alloc(width * height * 3); const setPixel = (buf, x, y, {R, G, B}) => { @@ -98,7 +99,7 @@ const buildDiffImage = async (img1, img2, options) => { if (!options.comparator({color1, color2, img1, img2, x, y, width, height})) { setPixel(resultBuffer, x, y, highlightColor); } else { - setPixel(resultBuffer, x, y, color1); + setPixel(resultBuffer, x, y, color1, alphaLevel); } }); diff --git a/lib/same-colors.js b/lib/same-colors.js index 6ab970e..10fc11c 100644 --- a/lib/same-colors.js +++ b/lib/same-colors.js @@ -6,5 +6,6 @@ module.exports = (data) => { return c1.R === c2.R && c1.G === c2.G - && c1.B === c2.B; + && c1.B === c2.B + && c1.A === c2.A; }; diff --git a/test/data/diffs/different-0-alpha.png b/test/data/diffs/different-0-alpha.png new file mode 100644 index 0000000..8e3b726 Binary files /dev/null and b/test/data/diffs/different-0-alpha.png differ diff --git a/test/data/diffs/different-50-alpha.png b/test/data/diffs/different-50-alpha.png new file mode 100644 index 0000000..d7fdbe8 Binary files /dev/null and b/test/data/diffs/different-50-alpha.png differ diff --git a/test/test.js b/test/test.js index b3da29b..fd68556 100644 --- a/test/test.js +++ b/test/test.js @@ -449,7 +449,37 @@ describe('createDiff', () => { expect(equal).to.equal(true); }); + it('should apply full transparency to the diff if set to 0', (done) => { + const _this = this; + looksSame.createDiff({ + reference: srcPath('ref.png'), + current: srcPath('different.png'), + diff: this.tempName, + highlightColor: '#ff00ff', + transparency: 0 + }, () => { + looksSame(imagePath('diffs/different-0-alpha.png'), _this.tempName, {strict: true}, (error, equal) => { + expect(equal).to.equal(true); + done(); + }); + }); + }); + it('should support partial transparency in the diff', (done) => { + const _this = this; + looksSame.createDiff({ + reference: srcPath('ref.png'), + current: srcPath('different.png'), + diff: this.tempName, + highlightColor: '#ff00ff', + transparency: 50 + }, () => { + looksSame(imagePath('diffs/different-50-alpha.png'), _this.tempName, {strict: true}, (error, equal) => { + expect(equal).to.equal(true); + done(); + }); + }); + }); it('should allow to build diff for taller images', async () => { await looksSame.createDiff({ reference: srcPath('ref.png'),