playground
/
Resemble.js
mirror of https://github.com/Huddle/Resemble.js.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Merge branch 'zol-master'

pull/104/head
james.cryer 7 years ago
parent
f593c0e03c 15db0e01a2
commit
4b94469100
13 changed files with 2428 additions and 89 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .gitignore
  2. 42
      README.md
  3. 104
      chai-tests/main_spec.js
  4. 3
      chai-tests/test.html
  5. 15
      dockerfile
  6. BIN
      nodejs-tests/PeopleComparedToPeople2.png
  7. 13
      nodejs-tests/compareImages.js
  8. 33
      nodejs-tests/compareImages.test.js
  9. 89
      nodejs-tests/resemble.test.js
  10. 2084
      package-lock.json
  11. 17
      package.json
  12. 29
      resemble.js
  13. 79
      tests/main_spec.js

1
.gitignore vendored
Unescape View File

@ -1 +1,2 @@
.idea .idea
node_modules

42
README.md
Unescape View File

@ -1,7 +1,7 @@
Resemble.js Resemble.js
========== ==========
Analyse and compare images with Javascript and HTML5. [More info & Resemble.js Demo](http://huddle.github.com/Resemble.js/). If you need NodeJS support, take a look at [node-resemble](https://github.com/ddo/node-resemble) or [node-resemble-v2](https://github.com/peter-mouland/node-resemble-v2). Analyse and compare images with Javascript and HTML5. [More info & Resemble.js Demo](http://huddle.github.com/Resemble.js/). Compatible with Node.js.
![Two image diff examples side-by-side, one pink, one yellow.](https://raw.github.com/Huddle/Resemble.js/master/demoassets/readmeimage.jpg "Visual image comparison") ![Two image diff examples side-by-side, one pink, one yellow.](https://raw.github.com/Huddle/Resemble.js/master/demoassets/readmeimage.jpg "Visual image comparison")
@ -83,6 +83,46 @@ 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). `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).
### Node.js
#### Installation
On Node, Resemble uses the `canvas` package instead of the native canvas support in the browser. In order to prevent browser users to be forced into installing canvas, it's included as a peer dependency which means you have to install it alongside resemble.
Canvas relies on some native image manipulation libraries to be install on the system. Simple, detailed instructions for OSX/Windows/Linux can be found [here](https://www.npmjs.com/package/canvas).
*Example commands for installation on OSX*
``` bash
npm install resemblejs
brew install pkg-config cairo libpng jpeg giflib
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:
``` js
const compareImage = require('resemblejs/compareImage');
// 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')
);
fs.writeFileSync('./output.png', data.getBuffer());
```
#### Tests
To run the tests on Node (using Jest), type:
``` bash
npm run test
```
-------------------------------------- --------------------------------------

104
chai-tests/main_spec.js
View File

File diff suppressed because one or more lines are too long

3
tests/test.html → chai-tests/test.html
Unescape View File

@ -6,7 +6,8 @@
<body> <body>
<p>Check the console for test results</p> <p>Check the console for test results</p>
<script src="../resemble.js"></script> <script src="../resemble.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chai/3.4.1/chai.js"></script> <!--script src="//cdnjs.cloudflare.com/ajax/libs/chai/3.4.1/chai.js"></script-->
<script src="../node_modules/chai/chai.js"></script>
<script src="main_spec.js"></script> <script src="main_spec.js"></script>
</body> </body>
</html> </html>

15
dockerfile
Unescape View File

@ -0,0 +1,15 @@
FROM node:8
RUN apt-get update \
&& apt-get install -qq libcairo2-dev libjpeg-dev libpango1.0-dev libgif-dev build-essential g++
RUN mkdir -p /opt/node/js \
&& cd /opt/node \
&& npm install canvas color-convert
WORKDIR /opt/node/js
COPY . /opt/node/js
RUN npm install
CMD ["npm", "run", "test"]

BIN
nodejs-tests/PeopleComparedToPeople2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

13
nodejs-tests/compareImages.js
Unescape View File

@ -0,0 +1,13 @@
const resemble = require('../resemble');
module.exports = async function(image1, image2) {
return new Promise(function(resolve, reject) {
resemble(image1).compareTo(image2).onComplete(function(data) {
if (data.error) {
reject(data.error);
} else {
resolve(data);
}
});
});
};

33
nodejs-tests/compareImages.test.js
Unescape View File

@ -0,0 +1,33 @@
const compareImages = require('./compareImages');
const fs = require('fs');
describe('compareImages', () => {
test('works with buffers', async () => {
const data = await compareImages(
fs.readFileSync('./demoassets/People.jpg'),
fs.readFileSync('./demoassets/People2.jpg')
);
expect(data.isSameDimensions).toBe(true);
expect(data.misMatchPercentage).toEqual('8.66');
const buffer = data.getBuffer();
expect(buffer).toBeInstanceOf(Buffer);
expect(buffer.length).toBe(91876);
const comparison = fs.readFileSync(
'./nodejs-tests/PeopleComparedToPeople2.png'
);
expect(buffer.equals(comparison)).toBe(true);
});
test('throws when failed', async () => {
const promise = compareImages(
fs.readFileSync('./demoassets/People.jpg'),
'bogus data'
);
await expect(promise).rejects.toMatch('Image load error.');
});
});

89
nodejs-tests/resemble.test.js
Unescape View File

@ -0,0 +1,89 @@
const resemble = require('../resemble');
const fs = require('fs');
describe('resemble', () => {
test('base64', () => {
const people_src =
'data:image/jpeg;base64,' +
fs.readFileSync('./demoassets/People.jpg', 'base64');
const people2_src =
'data:image/jpeg;base64,' +
fs.readFileSync('./demoassets/People2.jpg', 'base64');
return new Promise(function(resolve, reject) {
resemble(people_src).compareTo(people2_src).onComplete(function(data) {
// console.info('Reached oncomplete for base64_string');
expect(data.diffBounds.bottom).toEqual(431);
expect(data.diffBounds.left).toEqual(22);
expect(data.diffBounds.right).toEqual(450);
expect(data.diffBounds.top).toEqual(58);
expect(data.dimensionDifference.height).toEqual(0);
expect(data.dimensionDifference.width).toEqual(0);
expect(data.isSameDimensions).toBe(true);
expect(data.misMatchPercentage).toEqual('8.66');
resolve();
});
});
});
test('files', () => {
return new Promise(function(resolve, reject) {
resemble('./demoassets/People.jpg')
.compareTo('./demoassets/People2.jpg')
.onComplete(function(data) {
// console.info('Reached oncomplete for request_success');
expect(data.diffBounds).toEqual(
expect.objectContaining({
bottom: expect.any(Number),
left: expect.any(Number),
top: expect.any(Number),
right: expect.any(Number)
})
);
expect(data.diffBounds.bottom).toEqual(431);
expect(data.diffBounds.left).toEqual(22);
expect(data.diffBounds.right).toEqual(450);
expect(data.diffBounds.top).toEqual(58);
expect(data.dimensionDifference.height).toEqual(0);
expect(data.dimensionDifference.width).toEqual(0);
expect(data.isSameDimensions).toBe(true);
expect(data.misMatchPercentage).toEqual('8.66');
resolve();
});
});
});
test('file not found', () => {
return new Promise(function(resolve, reject) {
resemble('../demoassets/People.jpg')
.compareTo('../demoassets/404-image.jpg')
.onComplete(function(data) {
// console.info('Reached oncomplete for request_404');
// console.log(data);
expect(data.error).toEqual('Image load error.');
resolve();
});
});
});
test('node buffers', () => {
const people = fs.readFileSync('./demoassets/People.jpg');
const people2 = fs.readFileSync('./demoassets/People2.jpg');
return new Promise(function(resolve, reject) {
resemble(people).compareTo(people2).onComplete(function(data) {
// console.info('Reached oncomplete for base64_string');
expect(data.diffBounds.bottom).toEqual(431);
expect(data.diffBounds.left).toEqual(22);
expect(data.diffBounds.right).toEqual(450);
expect(data.diffBounds.top).toEqual(58);
expect(data.dimensionDifference.height).toEqual(0);
expect(data.dimensionDifference.width).toEqual(0);
expect(data.isSameDimensions).toBe(true);
expect(data.misMatchPercentage).toEqual('8.66');
resolve();
});
});
});
});

2084
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

17
package.json
Unescape View File

@ -20,5 +20,20 @@
"bugs": { "bugs": {
"url": "https://github.com/Huddle/Resemble.js/issues" "url": "https://github.com/Huddle/Resemble.js/issues"
}, },
"homepage": "https://github.com/Huddle/Resemble.js" "homepage": "https://github.com/Huddle/Resemble.js",
"scripts": {
"test": "jest ./nodejs-tests",
"test-watch": "jest --watch ./nodejs-tests"
},
"devDependencies": {
"chai": "^3.4.1",
"jest": "^20.0.4",
"jest-cli": "^20.0.4"
},
"peerDependencies": {
"canvas": "^1.6.5"
},
"jest": {
"testEnvironment": "node"
}
} }

29
resemble.js
Unescape View File

@ -61,7 +61,13 @@ URL: https://github.com/Huddle/Resemble.js
var errorPixel = errorPixelTransform.flat; var errorPixel = errorPixelTransform.flat;
var largeImageThreshold = 1200; var largeImageThreshold = 1200;
var useCrossOrigin = true; var useCrossOrigin = true;
var document = typeof window != "undefined" ? window.document : {}; var document = typeof window != "undefined" ? window.document : {
createElement: function() {
// This will work as long as only createElement is used on window.document
var Canvas = require('canvas');
return new Canvas();
}
};
var resemble = function( fileData ){ var resemble = function( fileData ){
@ -151,7 +157,15 @@ URL: https://github.com/Huddle/Resemble.js
function loadImageData( fileData, callback ){ function loadImageData( fileData, callback ){
var fileReader; var fileReader;
var hiddenImage = new Image(); var hiddenImage;
if (typeof Image !== 'undefined') {
hiddenImage = new Image();
} else {
var CanvasImage = require('canvas').Image;
hiddenImage = new CanvasImage();
hiddenImage.setAttribute = function setAttribute() { };
}
if(useCrossOrigin) { if(useCrossOrigin) {
hiddenImage.setAttribute('crossorigin', 'anonymous'); hiddenImage.setAttribute('crossorigin', 'anonymous');
@ -201,7 +215,9 @@ URL: https://github.com/Huddle/Resemble.js
images.push(fileData); images.push(fileData);
callback(fileData, fileData.width, fileData.height); callback(fileData, fileData.width, fileData.height);
} else if (typeof Buffer !== 'undefined' && fileData instanceof Buffer){
// If we have Buffer, assume we're on Node+Canvas and its supported
hiddenImage.src = fileData;
} else { } else {
fileReader = new FileReader(); fileReader = new FileReader();
fileReader.onload = function (event) { fileReader.onload = function (event) {
@ -482,6 +498,13 @@ URL: https://github.com/Huddle/Resemble.js
return hiddenCanvas.toDataURL("image/png"); return hiddenCanvas.toDataURL("image/png");
}; };
if (hiddenCanvas.toBuffer) {
data.getBuffer = function() {
context.putImageData(imgd, 0, 0);
return hiddenCanvas.toBuffer();
}
}
} }
function addLabel(text, context, hiddenCanvas){ function addLabel(text, context, hiddenCanvas){

79
tests/main_spec.js
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save