Browse Source

Implemented output settings as suggested by amolgkulkarni

pull/20/head v1.1.0
James Cryer 11 years ago
parent
commit
aba174658e
  1. 17
      README.md
  2. BIN
      demoassets/People.jpg
  3. BIN
      demoassets/People2.jpg
  4. 61
      demoassets/main.js
  5. BIN
      demoassets/readmeimage.jpg
  6. 22
      index.html
  7. 2
      package.json
  8. 82
      resemble.js

17
README.md

@ -3,6 +3,8 @@ Resemble.js
Analyse and compare images with Javascript and HTML5. [Resemble.js Demo](http://huddle.github.com/Resemble.js/) Analyse and compare images with Javascript and HTML5. [Resemble.js Demo](http://huddle.github.com/Resemble.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")
### Get it ### Get it
`npm install resemblejs` `npm install resemblejs`
@ -51,6 +53,21 @@ You can also change the comparison method after the first analysis.
diff.ignoreAntialiasing(); diff.ignoreAntialiasing();
``` ```
And change the output display style.
```javascript
resemble.outputSettings({
errorColor: {
red: 255,
green: 0,
blue: 255
},
errorType: 'movement',
transparency: 0.3
});
// resembleControl.repaint();
```
-------------------------------------- --------------------------------------
Created by [James Cryer](http://github.com/jamescryer) and the Huddle development team. Created by [James Cryer](http://github.com/jamescryer) and the Huddle development team.

BIN
demoassets/People.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 23 KiB

BIN
demoassets/People2.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 29 KiB

61
demoassets/main.js

@ -60,7 +60,7 @@ $(function(){
window.open(diffImage.src, '_blank'); window.open(diffImage.src, '_blank');
}); });
$('#buttons').show(); $('.buttons').show();
if(data.misMatchPercentage == 0){ if(data.misMatchPercentage == 0){
$('#thesame').show(); $('#thesame').show();
@ -80,13 +80,14 @@ $(function(){
var file1; var file1;
var file2; var file2;
var resembleControl; var resembleControl;
dropZone($('#dropzone1'), function(file){ dropZone($('#dropzone1'), function(file){
console.log(file);
file1 = file; file1 = file;
if(file2){ if(file2){
resembleControl = resemble(file).compareTo(file2).onComplete(onComplete); resembleControl = resemble(file).compareTo(file2).onComplete(onComplete);
} }
}); });
dropZone($('#dropzone2'), function(file){ dropZone($('#dropzone2'), function(file){
file2 = file; file2 = file;
if(file1){ if(file1){
@ -94,13 +95,12 @@ $(function(){
} }
}); });
var buttons = $('.buttons button');
var buttons = $('#raw, #colors, #antialising');
buttons.click(function(){ buttons.click(function(){
var $this = $(this); var $this = $(this);
buttons.removeClass('active'); $this.parent('.buttons').find('button').removeClass('active');
$this.addClass('active'); $this.addClass('active');
if($this.is('#raw')){ if($this.is('#raw')){
@ -114,8 +114,57 @@ $(function(){
if($this.is('#antialising')){ if($this.is('#antialising')){
resembleControl.ignoreAntialiasing(); resembleControl.ignoreAntialiasing();
} }
else
if($this.is('#pink')){
resemble.outputSettings({
errorColor: {
red: 255,
green: 0,
blue: 255
}
});
resembleControl.repaint();
}
else
if($this.is('#yellow')){
resemble.outputSettings({
errorColor: {
red: 255,
green: 255,
blue: 0
}
});
resembleControl.repaint();
}
else
if($this.is('#flat')){
resemble.outputSettings({
errorType: 'flat'
});
resembleControl.repaint();
}
else
if($this.is('#movement')){
resemble.outputSettings({
errorType: 'movement'
});
resembleControl.repaint();
}
else
if($this.is('#opaque')){
resemble.outputSettings({
transparency: 1
});
resembleControl.repaint();
}
else
if($this.is('#transparent')){
resemble.outputSettings({
transparency: 0.3
});
resembleControl.repaint();
}
}); });
(function(){ (function(){
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();

BIN
demoassets/readmeimage.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

22
index.html

@ -84,11 +84,31 @@
Diff will appear here. Diff will appear here.
</div> </div>
<br/> <br/>
<div class="btn-group" id="buttons" style="display:none">
<div class="btn-group buttons" style="display:none">
<button class="btn active" id="raw">Ignore nothing</button> <button class="btn active" id="raw">Ignore nothing</button>
<button class="btn" id="colors">Ignore colors</button> <button class="btn" id="colors">Ignore colors</button>
<button class="btn" id="antialising">Ignore antialiasing</button> <button class="btn" id="antialising">Ignore antialiasing</button>
</div> </div>
<br/>
<br/>
<div class="btn-group buttons" style="display:none">
<button class="btn active" id="pink">Pink</button>
<button class="btn" id="yellow">Yellow</button>
</div>
<div class="btn-group buttons" style="display:none">
<button class="btn active" id="flat">Flat</button>
<button class="btn" id="movement">Movement</button>
</div>
<div class="btn-group buttons" style="display:none">
<button class="btn active" id="opaque">Opaque</button>
<button class="btn" id="transparent">Transparent</button>
</div>
<br/> <br/>
<br/> <br/>
<div id="diff-results" style="display:none;"> <div id="diff-results" style="display:none;">

2
package.json

@ -1,6 +1,6 @@
{ {
"name": "resemblejs", "name": "resemblejs",
"version": "1.0.1", "version": "1.1.0",
"description": "Image analysis and comparison with HTML5", "description": "Image analysis and comparison with HTML5",
"main": "resemble.js", "main": "resemble.js",
"repository": { "repository": {

82
resemble.js

@ -1,13 +1,41 @@
/* /*
Author: James Cryer James Cryer / Huddle 2014
Company: Huddle
Last updated date: 17 Sep 2013
URL: https://github.com/Huddle/Resemble.js URL: https://github.com/Huddle/Resemble.js
*/ */
(function(_this){ (function(_this){
'use strict'; 'use strict';
var pixelTransparency = 1;
var errorPixelColor = { // Color for Error Pixels. Between 0 and 255.
red: 255,
green: 0,
blue: 255,
alpha: 255
};
var errorPixelTransform = {
flat : function (d1, d2){
return {
r: errorPixelColor.red,
g: errorPixelColor.green,
b: errorPixelColor.blue,
a: errorPixelColor.alpha
}
},
movement: function (d1, d2){
return {
r: ((d2.r*(errorPixelColor.red/255)) + errorPixelColor.red)/2,
g: ((d2.g*(errorPixelColor.green/255)) + errorPixelColor.green)/2,
b: ((d2.b*(errorPixelColor.blue/255)) + errorPixelColor.blue)/2,
a: d2.a
}
}
};
var errorPixelTransformer = errorPixelTransform.flat;
_this['resemble'] = function( fileData ){ _this['resemble'] = function( fileData ){
var data = {}; var data = {};
@ -242,28 +270,28 @@ URL: https://github.com/Huddle/Resemble.js
return false; return false;
} }
function errorPixel(px, offset){ function errorPixel(px, offset, data1, data2){
px[offset] = 255; //r var data = errorPixelTransformer(data1, data2);
px[offset + 1] = 0; //g px[offset] = data.r;
px[offset + 2] = 255; //b px[offset + 1] = data.g;
px[offset + 3] = 255; //a px[offset + 2] = data.b;
px[offset + 3] = data.a;
} }
function copyPixel(px, offset, data){ function copyPixel(px, offset, data){
px[offset] = data.r; //r px[offset] = data.r; //r
px[offset + 1] = data.g; //g px[offset + 1] = data.g; //g
px[offset + 2] = data.b; //b px[offset + 2] = data.b; //b
px[offset + 3] = data.a; //a px[offset + 3] = data.a * pixelTransparency; //a
} }
function copyGrayScalePixel(px, offset, data){ function copyGrayScalePixel(px, offset, data){
px[offset] = data.brightness; //r px[offset] = data.brightness; //r
px[offset + 1] = data.brightness; //g px[offset + 1] = data.brightness; //g
px[offset + 2] = data.brightness; //b px[offset + 2] = data.brightness; //b
px[offset + 3] = data.a; //a px[offset + 3] = data.a * pixelTransparency; //a
} }
function getPixelInfo(data, offset, cacheSet){ function getPixelInfo(data, offset, cacheSet){
var r; var r;
var g; var g;
@ -346,14 +374,14 @@ URL: https://github.com/Huddle/Resemble.js
if( isPixelBrightnessSimilar(pixel1, pixel2) ){ if( isPixelBrightnessSimilar(pixel1, pixel2) ){
copyGrayScalePixel(targetPix, offset, pixel2); copyGrayScalePixel(targetPix, offset, pixel2);
} else { } else {
errorPixel(targetPix, offset); errorPixel(targetPix, offset, pixel1, pixel2);
mismatchCount++; mismatchCount++;
} }
return; return;
} }
if( isRGBSimilar(pixel1, pixel2) ){ if( isRGBSimilar(pixel1, pixel2) ){
copyPixel(targetPix, offset, pixel2); copyPixel(targetPix, offset, pixel1, pixel2);
} else if( ignoreAntialiasing && ( } else if( ignoreAntialiasing && (
addBrightnessInfo(pixel1), // jit pixel info augmentation looks a little weird, sorry. addBrightnessInfo(pixel1), // jit pixel info augmentation looks a little weird, sorry.
@ -365,11 +393,11 @@ URL: https://github.com/Huddle/Resemble.js
if( isPixelBrightnessSimilar(pixel1, pixel2) ){ if( isPixelBrightnessSimilar(pixel1, pixel2) ){
copyGrayScalePixel(targetPix, offset, pixel2); copyGrayScalePixel(targetPix, offset, pixel2);
} else { } else {
errorPixel(targetPix, offset); errorPixel(targetPix, offset, pixel1, pixel2);
mismatchCount++; mismatchCount++;
} }
} else { } else {
errorPixel(targetPix, offset); errorPixel(targetPix, offset, pixel1, pixel2);
mismatchCount++; mismatchCount++;
} }
@ -515,6 +543,10 @@ URL: https://github.com/Huddle/Resemble.js
if(hasMethod) { param(); } if(hasMethod) { param(); }
return self; return self;
}, },
repaint: function(){
if(hasMethod) { param(); }
return self;
},
onComplete: function( callback ){ onComplete: function( callback ){
updateCallbackArray.push(callback); updateCallbackArray.push(callback);
@ -545,4 +577,24 @@ URL: https://github.com/Huddle/Resemble.js
}; };
}; };
_this['resemble'].outputSettings = function(options){
var key;
var undefined;
if(options.errorColor){
for (key in options.errorColor) {
errorPixelColor[key] = options.errorColor[key] === undefined ? errorPixelColor[key] : options.errorColor[key];
}
}
if(options.errorType && errorPixelTransform[options.errorType] ){
errorPixelTransformer = errorPixelTransform[options.errorType];
}
pixelTransparency = options.transparency || pixelTransparency;
return this;
};
}(this)); }(this));
Loading…
Cancel
Save