diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..fe33129 --- /dev/null +++ b/.dockerignore @@ -0,0 +1,7 @@ +.idea +**/node_modules +npm-debug.log +**/libs +index.html +bower.json +README.md \ No newline at end of file diff --git a/.npmignore b/.npmignore index b26c658..6caa0e6 100644 --- a/.npmignore +++ b/.npmignore @@ -3,4 +3,8 @@ npm-debug.log libs index.html bower.json -README.md \ No newline at end of file +README.md +chai-tests +nodejs-tests +.dockerignore +dockerfile \ No newline at end of file diff --git a/README.md b/README.md index 6940d20..b8438d9 100644 --- a/README.md +++ b/README.md @@ -75,8 +75,8 @@ resemble.outputSettings({ largeImageThreshold: 1200, useCrossOrigin: false, outputDiff: true -}); -// resembleControl.repaint(); +}) +// .repaint(); ``` It is possible to narrow down the area of comparison, by specifying a bounding box measured in pixels from the top left: @@ -89,8 +89,22 @@ resemble.outputSettings({ right: 200, bottom: 600 } -}); -// resembleControl.repaint(); +}) +// .repaint(); +``` + +You can also exclude part of the image from comparison, by specifying the excluded area in pixels from the top left: + +```javascript +resemble.outputSettings({ + ignoredBox: { + left: 100, + top: 200, + right: 200, + bottom: 600 + } +}) +// .repaint(); ``` By default, the comparison algorithm skips pixels when the image width or height is larger than 1200 pixels. This is there to mitigate performance issues. @@ -99,6 +113,52 @@ You can modify this behaviour by setting the `largeImageThreshold` option to a d `useCrossOrigin` is true by default, you might need to set it to false if you're using [Data URIs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs). +### Single callback api + +The resemble.compare API provides a convenience function that is used as follows: + +``` js +const compare = require('resemblejs').compare; + +function getDiff(){ + +const options = { + output: { + errorColor: { + red: 255, + green: 0, + blue: 255 + }, + errorType: 'movement', + transparency: 0.3, + largeImageThreshold: 1200, + useCrossOrigin: false, + outputDiff: true + }, + scaleToSameSize: true, + ignore: ['nothing', 'less', 'antialiasing', 'colors', 'alpha'], +}; +// The parameters can be Node Buffers +// data is the same as usual with an additional getBuffer() function +compare(image1, image2, options, function (err, data) { + if (err) { + console.log('An error!') + } else { + console.log(data); + /* + { + misMatchPercentage : 100, // % + isSameDimensions: true, // or false + dimensionDifference: { width: 0, height: -1 }, // defined if dimensions are not the same + getImageDataUrl: function(){} + } + */ + + } +}); +} +``` + ### Node.js #### Installation @@ -117,19 +177,44 @@ npm install canvas #### Usage -The API under Node is the same as on the browser with one addition, a promise based `compareImage` convenience function that is used as follows: +The API under Node is the same as on the `resemble.compare` but promise based: ``` js -const compareImage = require('resemblejs/compareImages'); - +const compareImages = require('resemblejs/compareImages'); +const fs = require("mz/fs"); + +async function getDiff(){ + +const options = { + output: { + errorColor: { + red: 255, + green: 0, + blue: 255 + }, + errorType: 'movement', + transparency: 0.3, + largeImageThreshold: 1200, + useCrossOrigin: false, + outputDiff: true + }, + scaleToSameSize: true, + ignore: ['nothing', 'less', 'antialiasing', 'colors', 'alpha'], +}; // The parameters can be Node Buffers // data is the same as usual with an additional getBuffer() function const data = await compareImages( - fs.readFileSync('./demoassets/People.jpg'), - fs.readFileSync('./demoassets/People2.jpg') + await fs.readFile('./demoassets/People.jpg'), + await fs.readFile('./demoassets/People2.jpg'), + options ); -fs.writeFileSync('./output.png', data.getBuffer()); +await fs.writeFile('./output.png', data.getBuffer()); + +} + +getDiff(); + ``` #### Tests diff --git a/bower.json b/bower.json index ab11696..f273061 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,6 @@ { "name": "resemblejs", "main": "resemble.js", - "version": "2.4.0", "homepage": "https://github.com/Huddle/Resemble.js", "authors": [ "James Cryer " diff --git a/compareImages.js b/compareImages.js index 42e5772..508fc36 100644 --- a/compareImages.js +++ b/compareImages.js @@ -1,10 +1,10 @@ -const resemble = require('./resemble'); +var resemble = require('./resemble'); -module.exports = async function(image1, image2) { +module.exports = function(image1, image2, options) { return new Promise(function(resolve, reject) { - resemble(image1).compareTo(image2).onComplete(function(data) { - if (data.error) { - reject(data.error); + resemble.compare(image1, image2, options, function(err, data) { + if (err) { + reject(err); } else { resolve(data); } diff --git a/demoassets/ghost1.png b/demoassets/ghost1.png new file mode 100644 index 0000000..2524ff9 Binary files /dev/null and b/demoassets/ghost1.png differ diff --git a/demoassets/ghost2.png b/demoassets/ghost2.png new file mode 100644 index 0000000..8ddf585 Binary files /dev/null and b/demoassets/ghost2.png differ diff --git a/demoassets/main.js b/demoassets/main.js index bbf23b6..0458c94 100644 --- a/demoassets/main.js +++ b/demoassets/main.js @@ -60,7 +60,23 @@ $(function(){ $('#image-diff').html(diffImage); $(diffImage).click(function(){ - window.open(diffImage.src, '_blank'); + var w = window.open("about:blank", "_blank"); + var html = w.document.documentElement; + var body = w.document.body; + + html.style.margin = 0; + html.style.padding = 0; + body.style.margin = 0; + body.style.padding = 0; + + var img = w.document.createElement("img"); + img.src = diffImage.src; + img.alt = "image diff"; + img.style.maxWidth = "100%"; + img.addEventListener("click", function() { + this.style.maxWidth = this.style.maxWidth === "100%" ? "" : "100%"; + }); + body.appendChild(img); }); $('.buttons').show(); @@ -134,86 +150,87 @@ $(function(){ } else if($this.is('#pink')){ - resemble.outputSettings({ + resembleControl.outputSettings({ errorColor: { red: 255, green: 0, blue: 255 } - }); - resembleControl.repaint(); + }).repaint(); } else if($this.is('#yellow')){ - resemble.outputSettings({ + resembleControl.outputSettings({ errorColor: { red: 255, green: 255, blue: 0 } - }); - resembleControl.repaint(); + }).repaint(); } else if($this.is('#flat')){ - resemble.outputSettings({ + resembleControl.outputSettings({ errorType: 'flat' - }); - resembleControl.repaint(); + }).repaint(); } else if($this.is('#movement')){ - resemble.outputSettings({ + resembleControl.outputSettings({ errorType: 'movement' - }); - resembleControl.repaint(); + }).repaint(); } else if($this.is('#flatDifferenceIntensity')){ - resemble.outputSettings({ + resembleControl.outputSettings({ errorType: 'flatDifferenceIntensity' - }); - resembleControl.repaint(); + }).repaint(); } else if($this.is('#movementDifferenceIntensity')){ - resemble.outputSettings({ + resembleControl.outputSettings({ errorType: 'movementDifferenceIntensity' - }); - resembleControl.repaint(); + }).repaint(); } else if($this.is('#diffOnly')){ - resemble.outputSettings({ + resembleControl.outputSettings({ errorType: 'diffOnly' - }); - resembleControl.repaint(); + }).repaint(); } else if($this.is('#opaque')){ - resemble.outputSettings({ + resembleControl.outputSettings({ transparency: 1 - }); - resembleControl.repaint(); + }).repaint(); } else if($this.is('#transparent')){ - resemble.outputSettings({ + resembleControl.outputSettings({ transparency: 0.3 - }); - resembleControl.repaint(); + }).repaint(); } else if($this.is('#boundingBox')){ - resemble.outputSettings({ + resembleControl.outputSettings({ boundingBox: { - left: $("#x1").val(), - top: $("#y1").val(), - right: $("#x2").val(), - bottom: $("#y2").val() + left: $("#bounding-box-x1").val(), + top: $("#bounding-box-y1").val(), + right: $("#bounding-box-x2").val(), + bottom: $("#bounding-box-y2").val() } - }); - resembleControl.repaint(); + }).repaint(); + $this.removeClass('active'); + } + if($this.is('#ignoredBox')){ + resembleControl.outputSettings({ + ignoredBox: { + left: $("#ignored-box-x1").val(), + top: $("#ignored-box-y1").val(), + right: $("#ignored-box-x2").val(), + bottom: $("#ignored-box-y2").val() + } + }).repaint(); $this.removeClass('active'); } }); diff --git a/index.html b/index.html index b9a3e83..ad0c3ad 100644 --- a/index.html +++ b/index.html @@ -142,19 +142,19 @@
- +
- +
- +
- +
@@ -162,6 +162,35 @@
+ +
+
+ + +