@syngrisi/node-resemble.js 0.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/LICENSE.Resemblejs +18 -0
- package/README.md +115 -0
- package/gulpfile.js +37 -0
- package/package.json +42 -0
- package/resemble.js +619 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
Copyright © 2014 Lukas Svoboda
|
|
3
|
+
Copyright © 2023 Viktar Silakou
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
|
7
|
+
this software and associated documentation files (the “Software”), to deal in
|
|
8
|
+
the Software without restriction, including without limitation the rights to
|
|
9
|
+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
|
10
|
+
the Software, and to permit persons to whom the Software is furnished to do so,
|
|
11
|
+
subject to the following conditions:
|
|
12
|
+
|
|
13
|
+
The above copyright notice and this permission notice shall be included in all
|
|
14
|
+
copies or substantial portions of the Software.
|
|
15
|
+
|
|
16
|
+
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
|
18
|
+
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
|
19
|
+
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
|
20
|
+
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
|
21
|
+
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
The MIT License (MIT) Copyright © 2013 Huddle
|
|
2
|
+
|
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
|
4
|
+
this software and associated documentation files (the “Software”), to deal in
|
|
5
|
+
the Software without restriction, including without limitation the rights to
|
|
6
|
+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
|
7
|
+
the Software, and to permit persons to whom the Software is furnished to do so,
|
|
8
|
+
subject to the following conditions:
|
|
9
|
+
|
|
10
|
+
The above copyright notice and this permission notice shall be included in all
|
|
11
|
+
copies or substantial portions of the Software.
|
|
12
|
+
|
|
13
|
+
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
14
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
|
15
|
+
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
|
16
|
+
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
|
17
|
+
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
|
18
|
+
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
node-resemble.js
|
|
2
|
+
================
|
|
3
|
+
|
|
4
|
+
<p align="center">
|
|
5
|
+
<a href="https://nodejs.org/docs/latest-v12.x/api/index.html"><img src="https://img.shields.io/badge/node-12+-brightgreen.svg"></a>
|
|
6
|
+
<a href="https://www.npmjs.com/package/nodejs-resemble"><img src="https://img.shields.io/npm/v/nodejs-resemble.svg"></a>
|
|
7
|
+
</p>
|
|
8
|
+
Supported fork of [node-resemble.js](https://github.com/burnpiro/node-resemble.js)
|
|
9
|
+
Analyse and compare images with Javascript. This project does not need canvas or any other binary dependencies.
|
|
10
|
+
It is a modification of [Resemble.js](https://github.com/Huddle/Resemble.js)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Get it
|
|
14
|
+
|
|
15
|
+
`npm install nodejs-resemble`
|
|
16
|
+
|
|
17
|
+
### Example
|
|
18
|
+
|
|
19
|
+
##### Retrieve basic analysis on image.
|
|
20
|
+
|
|
21
|
+
```javascript
|
|
22
|
+
var api = resemble(fileData).onComplete(function(data){
|
|
23
|
+
console.log(data);
|
|
24
|
+
/*
|
|
25
|
+
{
|
|
26
|
+
red: 255,
|
|
27
|
+
green: 255,
|
|
28
|
+
blue: 255,
|
|
29
|
+
brightness: 255
|
|
30
|
+
}
|
|
31
|
+
*/
|
|
32
|
+
});
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
##### Use resemble to compare two images.
|
|
36
|
+
|
|
37
|
+
```javascript
|
|
38
|
+
var diff = resemble(file).compareTo(file2).ignoreColors().onComplete(function(data){
|
|
39
|
+
console.log(data);
|
|
40
|
+
/*
|
|
41
|
+
{
|
|
42
|
+
misMatchPercentage : 100, // %
|
|
43
|
+
isSameDimensions: true, // or false
|
|
44
|
+
dimensionDifference: { width: 0, height: -1 }, // defined if dimensions are not the same
|
|
45
|
+
getImageDataUrl: function(){}
|
|
46
|
+
}
|
|
47
|
+
*/
|
|
48
|
+
});
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
##### You can also change the comparison method after the first analysis.
|
|
52
|
+
|
|
53
|
+
```javascript
|
|
54
|
+
// diff.ignoreNothing();
|
|
55
|
+
// diff.ignoreColors();
|
|
56
|
+
diff.ignoreAntialiasing();
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
##### Specify matching Box for image comparsion
|
|
60
|
+
|
|
61
|
+
```javascript
|
|
62
|
+
diff.ignoreRectangles([[325,170,100,40], [10,10,200,200]]);
|
|
63
|
+
```
|
|
64
|
+
- Ignores matched rectangles
|
|
65
|
+
- <[Array<Array[x, y, width, height]>]>
|
|
66
|
+
```javascript
|
|
67
|
+
diff.includeRectangles([[325,170,100,40], [10,10,200,200]]);
|
|
68
|
+
```
|
|
69
|
+
- Compares only within given rectangles
|
|
70
|
+
- <[Array<Array[x, y, width, height]>]>
|
|
71
|
+
|
|
72
|
+
##### Change the output display style.
|
|
73
|
+
|
|
74
|
+
```javascript
|
|
75
|
+
resemble.outputSettings({
|
|
76
|
+
errorColor: {
|
|
77
|
+
red: 255,
|
|
78
|
+
green: 0,
|
|
79
|
+
blue: 255
|
|
80
|
+
},
|
|
81
|
+
errorType: 'movement',
|
|
82
|
+
transparency: 0.3
|
|
83
|
+
});
|
|
84
|
+
// resembleControl.repaint();
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
--------------------------------------
|
|
88
|
+
## Example usuage (in cucumber step definition)
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
this.Then(/^Screenshot should match image "(.*)"$/, function (image, callback) {
|
|
92
|
+
browser.takeScreenshot().then(function(pngString) {
|
|
93
|
+
var screenshot = new Buffer(pngString, 'base64');
|
|
94
|
+
|
|
95
|
+
resemble(image)
|
|
96
|
+
.compareTo(screenshot)
|
|
97
|
+
.onComplete(function(data){
|
|
98
|
+
|
|
99
|
+
if (Number(data.misMatchPercentage) <= 0.01) {
|
|
100
|
+
callback();
|
|
101
|
+
} else {
|
|
102
|
+
data.getDiffImage().pack().pipe(fs.createWriteStream(image + 'diff.png'));
|
|
103
|
+
callback.fail(new Error("Screenshot '" + image+ "' differ " + data.misMatchPercentage + "%"));
|
|
104
|
+
}
|
|
105
|
+
});
|
|
106
|
+
});
|
|
107
|
+
})
|
|
108
|
+
|
|
109
|
+
--------------------------------------
|
|
110
|
+
|
|
111
|
+
Credits:
|
|
112
|
+
* Created by [James Cryer](http://github.com/jamescryer) and the Huddle development team.
|
|
113
|
+
* [Lukas Svoboda](http://github.com/lksv) - modification for node.js
|
|
114
|
+
* [Kemal Erdem](https://github.com/burnpiro) - modification
|
|
115
|
+
* [Viktar Silakou](https://github.com/viktor-silakov) - modification
|
package/gulpfile.js
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
var gulp = require('gulp');
|
|
2
|
+
var jasmine = require('gulp-jasmine');
|
|
3
|
+
var gutil = require('gulp-util');
|
|
4
|
+
const srcFiles = 'resemble.js';
|
|
5
|
+
var specFiles = 'resemble.spec.js';
|
|
6
|
+
|
|
7
|
+
function runTests(breakOnError) {
|
|
8
|
+
return gulp.src(specFiles)
|
|
9
|
+
.pipe(jasmine({
|
|
10
|
+
includeStackTrace: true
|
|
11
|
+
}))
|
|
12
|
+
.on('error', errorHandler(breakOnError));
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
function errorHandler(breakOnError) {
|
|
16
|
+
return function (error) {
|
|
17
|
+
if (breakOnError) {
|
|
18
|
+
throw error;
|
|
19
|
+
} else {
|
|
20
|
+
gutil.log(gutil.colors.red('[Jasmine]'), error.toString());
|
|
21
|
+
this.emit('end');
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
gulp.task('test', function (done) {
|
|
27
|
+
runTests(true);
|
|
28
|
+
done();
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
gulp.task('test:auto', function () {
|
|
32
|
+
runTests(false);
|
|
33
|
+
|
|
34
|
+
return gulp.watch([srcFiles, specFiles], function () {
|
|
35
|
+
runTests(false);
|
|
36
|
+
});
|
|
37
|
+
});
|
package/package.json
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@syngrisi/node-resemble.js",
|
|
3
|
+
"version": "0.0.16",
|
|
4
|
+
"description": "Image analysis and comparison for nodejs",
|
|
5
|
+
"main": "resemble.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"test": "gulp test",
|
|
8
|
+
"build": "echo build",
|
|
9
|
+
"release": "release-it --github.release"
|
|
10
|
+
},
|
|
11
|
+
"repository": {
|
|
12
|
+
"type": "git",
|
|
13
|
+
"url": "git+https://github.com/viktor-silakov/syngrisi-tool.git",
|
|
14
|
+
"directory": "packages/node-resemble.js"
|
|
15
|
+
},
|
|
16
|
+
"keywords": [
|
|
17
|
+
"comparison",
|
|
18
|
+
"image",
|
|
19
|
+
"diff",
|
|
20
|
+
"compare"
|
|
21
|
+
],
|
|
22
|
+
"author": {
|
|
23
|
+
"name": "Viktar Silakou",
|
|
24
|
+
"email": "1105714@gmail.com"
|
|
25
|
+
},
|
|
26
|
+
"license": "MIT",
|
|
27
|
+
"bugs": {
|
|
28
|
+
"url": "https://github.com/viktor-silakov/syngrisi-tool/issues"
|
|
29
|
+
},
|
|
30
|
+
"homepage": "https://github.com/viktor-silakov/syngrisi-tool/node-resemble.js/",
|
|
31
|
+
"dependencies": {
|
|
32
|
+
"jpeg-js": "0.4.4",
|
|
33
|
+
"pngjs": "^7.0.0",
|
|
34
|
+
"sharp": "^0.31.3"
|
|
35
|
+
},
|
|
36
|
+
"devDependencies": {
|
|
37
|
+
"gulp": "4.0.2",
|
|
38
|
+
"gulp-jasmine": "4.0.0",
|
|
39
|
+
"gulp-util": "3.0.7"
|
|
40
|
+
},
|
|
41
|
+
"gitHead": "ce9023a819d9aa4b93a1c8631328420e63645f91"
|
|
42
|
+
}
|
package/resemble.js
ADDED
|
@@ -0,0 +1,619 @@
|
|
|
1
|
+
/*
|
|
2
|
+
James Cryer / Huddle 2014
|
|
3
|
+
URL: https://github.com/Huddle/Resemble.js
|
|
4
|
+
*/
|
|
5
|
+
'use strict';
|
|
6
|
+
|
|
7
|
+
var PNG = require('pngjs').PNG;
|
|
8
|
+
var fs = require('fs');
|
|
9
|
+
var jpeg = require('jpeg-js');
|
|
10
|
+
var sharp = require('sharp');
|
|
11
|
+
|
|
12
|
+
//keeping wrong indentation and '_this' for better diff with origin resemble.js
|
|
13
|
+
var _this = {};
|
|
14
|
+
|
|
15
|
+
var pixelTransparency = 1;
|
|
16
|
+
|
|
17
|
+
var errorPixelColor = { // Color for Error Pixels. Between 0 and 255.
|
|
18
|
+
red: 255,
|
|
19
|
+
green: 0,
|
|
20
|
+
blue: 255,
|
|
21
|
+
alpha: 255
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
var errorPixelTransform = {
|
|
25
|
+
flat : function (d1, d2){
|
|
26
|
+
return {
|
|
27
|
+
r: errorPixelColor.red,
|
|
28
|
+
g: errorPixelColor.green,
|
|
29
|
+
b: errorPixelColor.blue,
|
|
30
|
+
a: errorPixelColor.alpha
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
movement: function (d1, d2){
|
|
34
|
+
return {
|
|
35
|
+
r: ((d2.r*(errorPixelColor.red/255)) + errorPixelColor.red)/2,
|
|
36
|
+
g: ((d2.g*(errorPixelColor.green/255)) + errorPixelColor.green)/2,
|
|
37
|
+
b: ((d2.b*(errorPixelColor.blue/255)) + errorPixelColor.blue)/2,
|
|
38
|
+
a: d2.a
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
var errorPixelTransformer = errorPixelTransform.flat;
|
|
44
|
+
var largeImageThreshold = 1200;
|
|
45
|
+
|
|
46
|
+
_this['resemble'] = function( fileData ){
|
|
47
|
+
|
|
48
|
+
var data = {};
|
|
49
|
+
var images = [];
|
|
50
|
+
var updateCallbackArray = [];
|
|
51
|
+
|
|
52
|
+
var tolerance = { // between 0 and 255
|
|
53
|
+
red: 16,
|
|
54
|
+
green: 16,
|
|
55
|
+
blue: 16,
|
|
56
|
+
alpha: 16,
|
|
57
|
+
minBrightness: 16,
|
|
58
|
+
maxBrightness: 240
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
var ignoreAntialiasing = false;
|
|
62
|
+
var ignoreColors = false;
|
|
63
|
+
var ignoreRectangles = null;
|
|
64
|
+
var includeRectangles = null;
|
|
65
|
+
|
|
66
|
+
function triggerDataUpdate(){
|
|
67
|
+
var len = updateCallbackArray.length;
|
|
68
|
+
var i;
|
|
69
|
+
for(i=0;i<len;i++){
|
|
70
|
+
if (typeof updateCallbackArray[i] === 'function'){
|
|
71
|
+
updateCallbackArray[i](data);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
function loop(x, y, callback){
|
|
77
|
+
var i,j;
|
|
78
|
+
|
|
79
|
+
for (i=0;i<x;i++){
|
|
80
|
+
for (j=0;j<y;j++){
|
|
81
|
+
callback(i, j);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
function parseImage(sourceImageData, width, height){
|
|
87
|
+
|
|
88
|
+
var pixleCount = 0;
|
|
89
|
+
var redTotal = 0;
|
|
90
|
+
var greenTotal = 0;
|
|
91
|
+
var blueTotal = 0;
|
|
92
|
+
var brightnessTotal = 0;
|
|
93
|
+
|
|
94
|
+
loop(height, width, function(verticalPos, horizontalPos){
|
|
95
|
+
var offset = (verticalPos*width + horizontalPos) * 4;
|
|
96
|
+
var red = sourceImageData[offset];
|
|
97
|
+
var green = sourceImageData[offset + 1];
|
|
98
|
+
var blue = sourceImageData[offset + 2];
|
|
99
|
+
var brightness = getBrightness(red,green,blue);
|
|
100
|
+
|
|
101
|
+
pixleCount++;
|
|
102
|
+
|
|
103
|
+
redTotal += red / 255 * 100;
|
|
104
|
+
greenTotal += green / 255 * 100;
|
|
105
|
+
blueTotal += blue / 255 * 100;
|
|
106
|
+
brightnessTotal += brightness / 255 * 100;
|
|
107
|
+
});
|
|
108
|
+
|
|
109
|
+
data.red = Math.floor(redTotal / pixleCount);
|
|
110
|
+
data.green = Math.floor(greenTotal / pixleCount);
|
|
111
|
+
data.blue = Math.floor(blueTotal / pixleCount);
|
|
112
|
+
data.brightness = Math.floor(brightnessTotal / pixleCount);
|
|
113
|
+
|
|
114
|
+
triggerDataUpdate();
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
function loadImageData( fileData, callback ){
|
|
118
|
+
sharp(fileData)
|
|
119
|
+
.png()
|
|
120
|
+
.toBuffer()
|
|
121
|
+
.then(pngData => {
|
|
122
|
+
var png = new PNG();
|
|
123
|
+
png.parse(pngData, function (err, data) {
|
|
124
|
+
callback(data, data.width, data.height);
|
|
125
|
+
});
|
|
126
|
+
})
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
function isColorSimilar(a, b, color){
|
|
130
|
+
|
|
131
|
+
var absDiff = Math.abs(a - b);
|
|
132
|
+
|
|
133
|
+
if(typeof a === 'undefined'){
|
|
134
|
+
return false;
|
|
135
|
+
}
|
|
136
|
+
if(typeof b === 'undefined'){
|
|
137
|
+
return false;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
if(a === b){
|
|
141
|
+
return true;
|
|
142
|
+
} else if ( absDiff < tolerance[color] ) {
|
|
143
|
+
return true;
|
|
144
|
+
} else {
|
|
145
|
+
return false;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
function isWithinRectangle(x, y, rectangle) {
|
|
150
|
+
return (x >= rectangle[1]) &&
|
|
151
|
+
(x < rectangle[1] + rectangle[3]) &&
|
|
152
|
+
(y >= rectangle[0]) &&
|
|
153
|
+
(y < rectangle[0] + rectangle[2])
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
function isNumber(n) {
|
|
157
|
+
return !isNaN(parseFloat(n));
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
function isPixelBrightnessSimilar(d1, d2){
|
|
161
|
+
var alpha = isColorSimilar(d1.a, d2.a, 'alpha');
|
|
162
|
+
var brightness = isColorSimilar(d1.brightness, d2.brightness, 'minBrightness');
|
|
163
|
+
return brightness && alpha;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
function getBrightness(r,g,b){
|
|
167
|
+
return 0.3*r + 0.59*g + 0.11*b;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
function isRGBSame(d1,d2){
|
|
171
|
+
var red = d1.r === d2.r;
|
|
172
|
+
var green = d1.g === d2.g;
|
|
173
|
+
var blue = d1.b === d2.b;
|
|
174
|
+
return red && green && blue;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
function isRGBSimilar(d1, d2){
|
|
178
|
+
var red = isColorSimilar(d1.r,d2.r,'red');
|
|
179
|
+
var green = isColorSimilar(d1.g,d2.g,'green');
|
|
180
|
+
var blue = isColorSimilar(d1.b,d2.b,'blue');
|
|
181
|
+
var alpha = isColorSimilar(d1.a, d2.a, 'alpha');
|
|
182
|
+
|
|
183
|
+
return red && green && blue && alpha;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
function isContrasting(d1, d2){
|
|
187
|
+
return Math.abs(d1.brightness - d2.brightness) > tolerance.maxBrightness;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
function getHue(r,g,b){
|
|
191
|
+
|
|
192
|
+
r = r / 255;
|
|
193
|
+
g = g / 255;
|
|
194
|
+
b = b / 255;
|
|
195
|
+
var max = Math.max(r, g, b), min = Math.min(r, g, b);
|
|
196
|
+
var h;
|
|
197
|
+
var d;
|
|
198
|
+
|
|
199
|
+
if (max == min){
|
|
200
|
+
h = 0; // achromatic
|
|
201
|
+
} else{
|
|
202
|
+
d = max - min;
|
|
203
|
+
switch(max){
|
|
204
|
+
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
|
|
205
|
+
case g: h = (b - r) / d + 2; break;
|
|
206
|
+
case b: h = (r - g) / d + 4; break;
|
|
207
|
+
}
|
|
208
|
+
h /= 6;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
return h;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
function isAntialiased(sourcePix, data, cacheSet, verticalPos, horizontalPos, width){
|
|
215
|
+
var offset;
|
|
216
|
+
var targetPix;
|
|
217
|
+
var distance = 1;
|
|
218
|
+
var i;
|
|
219
|
+
var j;
|
|
220
|
+
var hasHighContrastSibling = 0;
|
|
221
|
+
var hasSiblingWithDifferentHue = 0;
|
|
222
|
+
var hasEquivilantSibling = 0;
|
|
223
|
+
|
|
224
|
+
addHueInfo(sourcePix);
|
|
225
|
+
|
|
226
|
+
for (i = distance*-1; i <= distance; i++){
|
|
227
|
+
for (j = distance*-1; j <= distance; j++){
|
|
228
|
+
|
|
229
|
+
if(i===0 && j===0){
|
|
230
|
+
// ignore source pixel
|
|
231
|
+
} else {
|
|
232
|
+
|
|
233
|
+
offset = ((verticalPos+j)*width + (horizontalPos+i)) * 4;
|
|
234
|
+
targetPix = getPixelInfo(data, offset, cacheSet);
|
|
235
|
+
|
|
236
|
+
if(targetPix === null){
|
|
237
|
+
continue;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
addBrightnessInfo(targetPix);
|
|
241
|
+
addHueInfo(targetPix);
|
|
242
|
+
|
|
243
|
+
if( isContrasting(sourcePix, targetPix) ){
|
|
244
|
+
hasHighContrastSibling++;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
if( isRGBSame(sourcePix,targetPix) ){
|
|
248
|
+
hasEquivilantSibling++;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
if( Math.abs(targetPix.h - sourcePix.h) > 0.3 ){
|
|
252
|
+
hasSiblingWithDifferentHue++;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
if( hasSiblingWithDifferentHue > 1 || hasHighContrastSibling > 1){
|
|
256
|
+
return true;
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
if(hasEquivilantSibling < 2){
|
|
263
|
+
return true;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
return false;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
function errorPixel(px, offset, data1, data2){
|
|
270
|
+
var data = errorPixelTransformer(data1, data2);
|
|
271
|
+
px[offset] = data.r;
|
|
272
|
+
px[offset + 1] = data.g;
|
|
273
|
+
px[offset + 2] = data.b;
|
|
274
|
+
px[offset + 3] = data.a;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
function copyPixel(px, offset, data){
|
|
278
|
+
px[offset] = data.r; //r
|
|
279
|
+
px[offset + 1] = data.g; //g
|
|
280
|
+
px[offset + 2] = data.b; //b
|
|
281
|
+
px[offset + 3] = data.a * pixelTransparency; //a
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
function copyGrayScalePixel(px, offset, data){
|
|
285
|
+
px[offset] = data.brightness; //r
|
|
286
|
+
px[offset + 1] = data.brightness; //g
|
|
287
|
+
px[offset + 2] = data.brightness; //b
|
|
288
|
+
px[offset + 3] = data.a * pixelTransparency; //a
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
function getPixelInfo(data, offset, cacheSet){
|
|
292
|
+
var r;
|
|
293
|
+
var g;
|
|
294
|
+
var b;
|
|
295
|
+
var d;
|
|
296
|
+
var a;
|
|
297
|
+
|
|
298
|
+
r = data[offset];
|
|
299
|
+
|
|
300
|
+
if(typeof r !== 'undefined'){
|
|
301
|
+
g = data[offset+1];
|
|
302
|
+
b = data[offset+2];
|
|
303
|
+
a = data[offset+3];
|
|
304
|
+
d = {
|
|
305
|
+
r: r,
|
|
306
|
+
g: g,
|
|
307
|
+
b: b,
|
|
308
|
+
a: a
|
|
309
|
+
};
|
|
310
|
+
|
|
311
|
+
return d;
|
|
312
|
+
} else {
|
|
313
|
+
return null;
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
function addBrightnessInfo(data){
|
|
318
|
+
data.brightness = getBrightness(data.r,data.g,data.b); // 'corrected' lightness
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
function addHueInfo(data){
|
|
322
|
+
data.h = getHue(data.r,data.g,data.b);
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
function analyseImages(img1, img2, width, height){
|
|
326
|
+
|
|
327
|
+
var data1 = img1.data;
|
|
328
|
+
var data2 = img2.data;
|
|
329
|
+
|
|
330
|
+
//TODO
|
|
331
|
+
var imgd = new PNG({
|
|
332
|
+
width: img1.width,
|
|
333
|
+
height: img1.height,
|
|
334
|
+
deflateChunkSize: img1.deflateChunkSize,
|
|
335
|
+
deflateLevel: img1.deflateLevel,
|
|
336
|
+
deflateStrategy: img1.deflateStrategy,
|
|
337
|
+
});
|
|
338
|
+
var targetPix = imgd.data;
|
|
339
|
+
|
|
340
|
+
var mismatchCount = 0;
|
|
341
|
+
|
|
342
|
+
var time = Date.now();
|
|
343
|
+
|
|
344
|
+
var skip;
|
|
345
|
+
|
|
346
|
+
var currentRectangle = null;
|
|
347
|
+
var rectagnlesIdx = 0;
|
|
348
|
+
|
|
349
|
+
if(!!largeImageThreshold && ignoreAntialiasing && (width > largeImageThreshold || height > largeImageThreshold)){
|
|
350
|
+
skip = 6;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
loop(height, width, function(verticalPos, horizontalPos){
|
|
354
|
+
|
|
355
|
+
var offset = (verticalPos*width + horizontalPos) * 4;
|
|
356
|
+
|
|
357
|
+
if(skip){ // only skip if the image isn't small
|
|
358
|
+
if(verticalPos % skip === 0 || horizontalPos % skip === 0){
|
|
359
|
+
|
|
360
|
+
copyPixel(targetPix, offset, {
|
|
361
|
+
r: 0,
|
|
362
|
+
b: 0,
|
|
363
|
+
g: 0,
|
|
364
|
+
a: 0
|
|
365
|
+
});
|
|
366
|
+
|
|
367
|
+
return;
|
|
368
|
+
}
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
var pixel1 = getPixelInfo(data1, offset, 1);
|
|
372
|
+
var pixel2 = getPixelInfo(data2, offset, 2);
|
|
373
|
+
|
|
374
|
+
if(pixel1 === null || pixel2 === null){
|
|
375
|
+
return;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
if (ignoreRectangles) {
|
|
379
|
+
for(rectagnlesIdx = 0; rectagnlesIdx < ignoreRectangles.length; rectagnlesIdx++) {
|
|
380
|
+
currentRectangle = ignoreRectangles[rectagnlesIdx];
|
|
381
|
+
//console.log(currentRectangle, verticalPos, horizontalPos);
|
|
382
|
+
if (isWithinRectangle(verticalPos, horizontalPos, currentRectangle)) {
|
|
383
|
+
copyGrayScalePixel(targetPix, offset, pixel2);
|
|
384
|
+
//copyPixel(targetPix, offset, pixel1, pixel2);
|
|
385
|
+
return;
|
|
386
|
+
}
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
if (includeRectangles) {
|
|
391
|
+
var isWithinAnyRectangle = false;
|
|
392
|
+
for(rectagnlesIdx = 0; rectagnlesIdx < includeRectangles.length; rectagnlesIdx++) {
|
|
393
|
+
currentRectangle = includeRectangles[rectagnlesIdx];
|
|
394
|
+
if (isWithinRectangle(verticalPos, horizontalPos, currentRectangle)) {
|
|
395
|
+
isWithinAnyRectangle = true;
|
|
396
|
+
}
|
|
397
|
+
}
|
|
398
|
+
// Better solution but i'm not sure if you want to use reducers in your repo?
|
|
399
|
+
// var isWithinAnyRectangle = includeRectangles.reduce(function (acc, currentRectangle) {
|
|
400
|
+
// if(isWithinRectangle) {
|
|
401
|
+
// return true;
|
|
402
|
+
// }
|
|
403
|
+
// return acc;
|
|
404
|
+
// }, false);
|
|
405
|
+
if(!isWithinAnyRectangle) {
|
|
406
|
+
copyGrayScalePixel(targetPix, offset, pixel2);
|
|
407
|
+
return;
|
|
408
|
+
}
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
if (ignoreColors){
|
|
412
|
+
|
|
413
|
+
addBrightnessInfo(pixel1);
|
|
414
|
+
addBrightnessInfo(pixel2);
|
|
415
|
+
|
|
416
|
+
if( isPixelBrightnessSimilar(pixel1, pixel2) ){
|
|
417
|
+
copyGrayScalePixel(targetPix, offset, pixel2);
|
|
418
|
+
} else {
|
|
419
|
+
errorPixel(targetPix, offset, pixel1, pixel2);
|
|
420
|
+
mismatchCount++;
|
|
421
|
+
}
|
|
422
|
+
return;
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
if( isRGBSimilar(pixel1, pixel2) ){
|
|
426
|
+
copyPixel(targetPix, offset, pixel1);
|
|
427
|
+
|
|
428
|
+
} else if( ignoreAntialiasing && (
|
|
429
|
+
addBrightnessInfo(pixel1), // jit pixel info augmentation looks a little weird, sorry.
|
|
430
|
+
addBrightnessInfo(pixel2),
|
|
431
|
+
isAntialiased(pixel1, data1, 1, verticalPos, horizontalPos, width) ||
|
|
432
|
+
isAntialiased(pixel2, data2, 2, verticalPos, horizontalPos, width)
|
|
433
|
+
)){
|
|
434
|
+
|
|
435
|
+
if( isPixelBrightnessSimilar(pixel1, pixel2) ){
|
|
436
|
+
copyGrayScalePixel(targetPix, offset, pixel2);
|
|
437
|
+
} else {
|
|
438
|
+
errorPixel(targetPix, offset, pixel1, pixel2);
|
|
439
|
+
mismatchCount++;
|
|
440
|
+
}
|
|
441
|
+
} else {
|
|
442
|
+
errorPixel(targetPix, offset, pixel1, pixel2);
|
|
443
|
+
mismatchCount++;
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
});
|
|
447
|
+
|
|
448
|
+
data.rawMisMatchPercentage = (mismatchCount / (height*width) * 100);
|
|
449
|
+
data.misMatchPercentage = data.rawMisMatchPercentage.toFixed(2);
|
|
450
|
+
data.analysisTime = Date.now() - time;
|
|
451
|
+
|
|
452
|
+
data.getDiffImage = function(text){
|
|
453
|
+
return imgd;
|
|
454
|
+
};
|
|
455
|
+
|
|
456
|
+
data.getDiffImageAsJPEG = function(quality) {
|
|
457
|
+
return jpeg.encode({
|
|
458
|
+
data: targetPix,
|
|
459
|
+
width: img1.width,
|
|
460
|
+
height: img1.height
|
|
461
|
+
}, quality !== undefined ? quality : 50).data;
|
|
462
|
+
};
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
function compare(one, two){
|
|
466
|
+
|
|
467
|
+
function onceWeHaveBoth(img){
|
|
468
|
+
var width;
|
|
469
|
+
var height;
|
|
470
|
+
|
|
471
|
+
images.push(img);
|
|
472
|
+
if(images.length === 2){
|
|
473
|
+
width = images[0].width > images[1].width ? images[0].width : images[1].width;
|
|
474
|
+
height = images[0].height > images[1].height ? images[0].height : images[1].height;
|
|
475
|
+
|
|
476
|
+
if( (images[0].width === images[1].width) && (images[0].height === images[1].height) ){
|
|
477
|
+
data.isSameDimensions = true;
|
|
478
|
+
} else {
|
|
479
|
+
data.isSameDimensions = false;
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
data.dimensionDifference = { width: images[0].width - images[1].width, height: images[0].height - images[1].height };
|
|
483
|
+
|
|
484
|
+
//lksv: normalization removed
|
|
485
|
+
analyseImages( images[0], images[1], width, height);
|
|
486
|
+
|
|
487
|
+
triggerDataUpdate();
|
|
488
|
+
}
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
images = [];
|
|
492
|
+
loadImageData(one, onceWeHaveBoth);
|
|
493
|
+
loadImageData(two, onceWeHaveBoth);
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
function getCompareApi(param){
|
|
497
|
+
|
|
498
|
+
var secondFileData,
|
|
499
|
+
hasMethod = typeof param === 'function';
|
|
500
|
+
|
|
501
|
+
if( !hasMethod ){
|
|
502
|
+
// assume it's file data
|
|
503
|
+
secondFileData = param;
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
var self = {
|
|
507
|
+
ignoreNothing: function(){
|
|
508
|
+
|
|
509
|
+
tolerance.red = 16;
|
|
510
|
+
tolerance.green = 16;
|
|
511
|
+
tolerance.blue = 16;
|
|
512
|
+
tolerance.alpha = 16;
|
|
513
|
+
tolerance.minBrightness = 16;
|
|
514
|
+
tolerance.maxBrightness = 240;
|
|
515
|
+
|
|
516
|
+
ignoreAntialiasing = false;
|
|
517
|
+
ignoreColors = false;
|
|
518
|
+
|
|
519
|
+
if(hasMethod) { param(); }
|
|
520
|
+
return self;
|
|
521
|
+
},
|
|
522
|
+
ignoreAntialiasing: function(){
|
|
523
|
+
|
|
524
|
+
tolerance.red = 32;
|
|
525
|
+
tolerance.green = 32;
|
|
526
|
+
tolerance.blue = 32;
|
|
527
|
+
tolerance.alpha = 32;
|
|
528
|
+
tolerance.minBrightness = 64;
|
|
529
|
+
tolerance.maxBrightness = 96;
|
|
530
|
+
|
|
531
|
+
ignoreAntialiasing = true;
|
|
532
|
+
ignoreColors = false;
|
|
533
|
+
|
|
534
|
+
if(hasMethod) { param(); }
|
|
535
|
+
return self;
|
|
536
|
+
},
|
|
537
|
+
ignoreColors: function(){
|
|
538
|
+
|
|
539
|
+
tolerance.alpha = 16;
|
|
540
|
+
tolerance.minBrightness = 16;
|
|
541
|
+
tolerance.maxBrightness = 240;
|
|
542
|
+
|
|
543
|
+
ignoreAntialiasing = false;
|
|
544
|
+
ignoreColors = true;
|
|
545
|
+
|
|
546
|
+
if(hasMethod) { param(); }
|
|
547
|
+
return self;
|
|
548
|
+
},
|
|
549
|
+
//array of rectangles, each rectangle is defined as (x, y, width. height)
|
|
550
|
+
//e.g. [[325, 170, 100, 40]]
|
|
551
|
+
ignoreRectangles: function(rectangles) {
|
|
552
|
+
ignoreRectangles = rectangles;
|
|
553
|
+
return self;
|
|
554
|
+
},
|
|
555
|
+
//array of rectangles, each rectangle is defined as (x, y, width. height)
|
|
556
|
+
//e.g. [[325, 170, 100, 40]]
|
|
557
|
+
includeRectangles: function(rectangles) {
|
|
558
|
+
includeRectangles = rectangles;
|
|
559
|
+
return self;
|
|
560
|
+
},
|
|
561
|
+
repaint: function(){
|
|
562
|
+
if(hasMethod) { param(); }
|
|
563
|
+
return self;
|
|
564
|
+
},
|
|
565
|
+
onComplete: function( callback ){
|
|
566
|
+
|
|
567
|
+
updateCallbackArray.push(callback);
|
|
568
|
+
|
|
569
|
+
var wrapper = function(){
|
|
570
|
+
compare(fileData, secondFileData);
|
|
571
|
+
};
|
|
572
|
+
|
|
573
|
+
wrapper();
|
|
574
|
+
|
|
575
|
+
return getCompareApi(wrapper);
|
|
576
|
+
}
|
|
577
|
+
};
|
|
578
|
+
|
|
579
|
+
return self;
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
return {
|
|
583
|
+
onComplete: function( callback ){
|
|
584
|
+
updateCallbackArray.push(callback);
|
|
585
|
+
loadImageData(fileData, function(imageData, width, height){
|
|
586
|
+
parseImage(imageData.data, width, height);
|
|
587
|
+
});
|
|
588
|
+
},
|
|
589
|
+
compareTo: function(secondFileData){
|
|
590
|
+
return getCompareApi(secondFileData);
|
|
591
|
+
}
|
|
592
|
+
};
|
|
593
|
+
|
|
594
|
+
};
|
|
595
|
+
|
|
596
|
+
_this['resemble'].outputSettings = function(options){
|
|
597
|
+
var key;
|
|
598
|
+
var undefined;
|
|
599
|
+
|
|
600
|
+
if(options.errorColor){
|
|
601
|
+
for (key in options.errorColor) {
|
|
602
|
+
errorPixelColor[key] = options.errorColor[key] === undefined ? errorPixelColor[key] : options.errorColor[key];
|
|
603
|
+
}
|
|
604
|
+
}
|
|
605
|
+
|
|
606
|
+
if(options.errorType && errorPixelTransform[options.errorType] ){
|
|
607
|
+
errorPixelTransformer = errorPixelTransform[options.errorType];
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
pixelTransparency = options.transparency || pixelTransparency;
|
|
611
|
+
|
|
612
|
+
if (options.largeImageThreshold !== undefined) {
|
|
613
|
+
largeImageThreshold = options.largeImageThreshold;
|
|
614
|
+
}
|
|
615
|
+
|
|
616
|
+
return this;
|
|
617
|
+
};
|
|
618
|
+
|
|
619
|
+
module.exports = _this['resemble']
|