rsmbl / resemble.js Goto Github PK
View Code? Open in Web Editor NEWImage analysis and comparison
Home Page: http://rsmbl.github.io/Resemble.js/
License: MIT License
Image analysis and comparison
Home Page: http://rsmbl.github.io/Resemble.js/
License: MIT License
How can I pass link to an image? I get Cross-Origin error when I try that
Hi
I liked this script,
I created a stroke trace application which uses Resemble.js for image comparison.
http://kpomservices.com/HTML5CanvasStroke/demo/index.html
Above link is working fine in desktop browsers but its not working in mobile browsers.
Resemble.js will work in mobile browser?
Thanks
Is it possible to compare between two face images with Resemble?
I would use this for something like verification purpose
Is it reliable enough?
Thanks in advance and keep up the good work
Wrestling with this method and can't seem to get it.
Here's my work:
resemble
.resemble(baselinePath)
.compareTo(resultPath)
.ignoreAntialiasing()
// Uncommenting this causes failure. Commenting it out works: .scaleToSameSize()
.onComplete(callback);
/Users/hulk/github/gameclash/tweetbot/node_modules/resemblejs/resemble.js:63
var documentDomainRegex = new RegExp('^https?://' + document.domain);
^
ReferenceError: document is not defined
at /Users/hulk/github/gameclash/tweetbot/node_modules/resemblejs/resemble.js:63:54
at Object. (/Users/hulk/github/gameclash/tweetbot/node_modules/resemblejs/resemble.js:642:2)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at /Users/hulk/github/gameclash/tweetbot/app.js:62:16
at Array.forEach (native)
The image loading is only tracked with onLoad, so any network error or a simple typo in the filename is never detected. Please make Resemble.js throw an error in case of an error.
Hi,
Is there anyway I can get resemble to output the dif using the pixel colours from one of the original source images?
I'm developing a camera streaming site, and rather than send a whole frame of the camera on each cycle, I figured it might be more efficient to just send the differences to the last frame. So if I could get the difference between image A and image B, with the pixels matching image B (kind of like using the dif as a mask over image B), and the rest transparent, then by sending that smaller dif over the wire I can merge it with image A on the server and get a very close approximation of the true image B frame.
Does sound feasible?
Thanks
I was wondering if its possible to use Resemble with remote images? Basically I am trying to do the following but I am getting a SecurityError.
Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
Is there anyway of getting around this?
var img1 = 'http://www.google.com/think/images/google-trends_tools_sm.jpg';
var img2 = 'http://informationng.com/wp-content/uploads/2014/02/google.jpg';
resemble(img1).compareTo(img2).onComplete(function(data){
console.log(data);
});
Is it possible to do something like the following?
var img1 = Image()
img1.src = 'http://www.google.com/think/images/google-trends_tools_sm.jpg';
var img2 = Image();
img2.src = 'http://informationng.com/wp-content/uploads/2014/02/google.jpg';
resemble(img1).compareTo(img2).onComplete(function(data){
console.log(data);
});
I'm not sure why its okay to load a remote image like this but its not okay to load it using Javascript.
Hello, I have a question about Resemble.js
I'm making a photo management service and i wanna check if new photo is similar with previous photo.
So can i determine two images are similar or completly dufferent by Resemble.js?
If i can, how can i do that? Can it compare images by their REST url? Does it compare faster if images are small? Can it compare two photos of different format?
Thank you for read this issue.
So my web app does pull the images from a service. Now since I also develop the service I have both local.
So when my web app on localhost:3000
tries to fetch images from localhost:8888
it fails, because the crossorigin isn't set.
Lines that causes this:
Why not always set the crossorigin
to anonymous
?
Hey there, this seems like a really cool project, so I wanted to try out the demo.
Unfortunately, when I try to drop this image into any of the three dropzones, I get Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
in the Chrome developer console.
It seems the offending line is 34 of demoassets/main.js.
I should say that I'm using Chrome 41.0.2272.101 m
EDIT: So it seems, after capturing the ondrop
event, that the dataTransfer
shows no files:
> temp1.originalEvent.dataTransfer
< DataTransfer {items: DataTransferItemList, files: FileList, types: Array[0], effectAllowed: "all", dropEffect: "none"…}
dropEffect: "none"
effectAllowed: "all"
files: FileList
length: 0
__proto__: FileList
items: DataTransferItemList
length: 0
__proto__: DataTransferItemList
types: Array[0]
length: 0
__proto__: Array[0]
__proto__: DataTransfer
Not sure why that would be, but hope that helps.
Hi @jamescryer ,
The ImageData of the attached "full-white" bitmap gives all the pixels with RGB values equal to 254 instead of 255
Any ideas?
How difficult would it be to make pixels that are the same (within tolerance) completely transparent and pixels that are different two separate colors for both images?
Any way to retrieve the regions w/ differences?
Hi,
Is it possible to get the bounding box in pixel units of the areas of the image that have changed?
Thanks,
Hey,
thanks for the cool tool. but I really find it difficult to work around it since there is not a single line of comment for all this code. I would really appreciate if you can add comments to it. Thanks
I don't have any images sitting around my computer (especially two that are similar enough to diff). The demo should just start with two default images so we can understand how the diff works without having to upload our own images.
Just find it useful and simple to deploy. But would like to know the algorithms or theories behind in comparing the image?
Hi
I know maybe I'm asking too much, but is it possible to have a "help" commented resemble.js file? Something that would clarify the main activities of the code, i know that is a really hardworking request, but i'm new in the image comparison and this could help me a lot!
I need this library to automate some test cases that I would run on a software.
Thank you anyway!
Hi
We are trying to compare 900 image one with each other to see how many duplicates we have in our app, we are using Electron and the performance of Resemble it's not good at all, the interface freezes for 4-5 seconds when we compare a lot of images using Promises and async to loop over. Images compared are 170x170 pixels, files are stored locally on hdd and the url starts with file:///c:... so the network latency doesn't exists
here is a screenshot from Dev Tools, you will see that the function onload takes a lot of time just for 1 image:
We show error pixels in Pink color with same transparency as of matched pixels.
Sometime Error pixels are not distinguished clearly and also matched pixel may have same color used to show error pixels.
We should show matched pixels with some transparency (e.g 50%) so that they are distinguished and user is more interested in mismatch data.
It would be convenient when in use within unit tests matchers to build complete diff message (eg. Karma + Jasmine). I may looks like getSourceImageDataUrl(1)
or getSourceImageDataUrl(2)
.
Hi @jamescryer and all contributors,
Thanks a lot for your great library.
I use resembleJS with phantomCss to compare browsers rendering and to check defacement intrusions.
It is just very difficult to compare renderings with different size.
Here is an example :
The second image is 99.75% different compared to the first. And they have different dimensions.
When you compare a part of image, it doesn't work because positions matching are not apply correctly.
function normalise(img, w, h){
var c;
var context;
if(img.height < h || img.width < w){
c = document.createElement('canvas');
c.width = w;
c.height = h;
context = c.getContext('2d');
context.putImageData(img, 0, 0); // <=== why x:0 y:0
return context.getImageData(0, 0, w, h);
}
return img;
}
It could be better if the result was :
The second image is 46.63% different compared to the first
Could you integrated a template matching method as you can find on openCV code ?
http://docs.opencv.org/2.4/doc/tutorials/imgproc/histograms/template_matching/template_matching.html
Regards
Jef le ponot
If one of images caching, then callback hiddenImage.onload
called twice.
The reason this behavior next lines (started at 163 line)
if (hiddenImage.complete) {
hiddenImage.onload();
}
If this lines remove, then all work correctly.
Thanks.
If we are comparing image A to image B, it would be nice to save A-B or B-A to a file. This would provide the "difference" between the images as a piece of one of the original two images (As opposed to just highlighting, which obscures what is "under" the highlight)
When two images are compared, the error pixels are shown in 'pink' colour.
Is it possible to configure colour of error pixels so that user can specify preferred colour if required?
I would like to have different colors for the deltas.
so like baseline missing from diff is blue..
and diff missing from baseline is red..
or something like this would allow you to see directionality of the change.
When comparing two images from the same source but were saved with different dimensions such as a thumbnail, Resemble.js reports that they are not similar as the pixel data comparison only occurs in the overlap of the photos starting from the top left corner.
Example 1: Thumbnail (50x50) vs Source (282x281) Note the thumbnail overlaid on top left of the larger image, failing comparison
Desired behavior is to scale the images to be the same size before comparing pixel data (still reporting that the input images have different resolutions). For demonstration purposes, I resized the source image in Photoshop to match 50x50 of the thumbnail and re-ran the comparison, which reported much more accurate results.
Example 2: Thumbnail (50x50) vs Scaled Source (50x50)** Much more accurate comparison results.
I am experimenting with resizing the images with Canvas elements before loading into Resemble.js, but I believe this is an issue worth considering in the library core.
When the example image is loaded , the result does not appear in chrome .. only manually added images show results ...
And can you please show tutorial to build a page to load images automatically and showing the results while opening the page ?
As per title. Setting transparency to 0.01 (or similar) is a workaround, but not pretty.
Do you by any chance have a console version of this to take parameters for an input directory and output directory to deal with single or multiple image comparisons?
For analyzing many images, it would be expedient to do this on the server, eg via node-canvas. Are you planning to make Resemble.js support that?
Hi,
Is it possible today to get the diff of an image zone (like a crop) ?
If not, what do you think about adding some optional parameters, i.e. left,top,right,bottom margin
Cheers
To reproduce:
Reading through the source, it seems like this is to do with largeImageThreshold
and skipping every 6th pixel for large images when ignoreAntialiasing
is true. What is the purpose of this skipping – is it a performance optimisation? I would think it would only save approximately 1/4 of the processing time. Can an option be added to disable it, or even better have it off by default and allow it to be enabled by the user when they want this optimisation?
Edit: updated with more accurate information after reading the source code
It might make sense to move some of the documentation out of the demo and into the readme (or at least, to duplicate that content).
Hey, thanks for the cool software but I find it so difficult to work with this! Since there is not a single comment for any of the codes that you put here! I would really appreciate if you can add some comments.
Thanks
Would it be possible to show the differences between the two images by shading the pink pixels with varying color intensities, which represent how far away the colors on the 2 images are?
in my project, I have to show a progress bar, while it's comparing. Ids it possible to have return some progress data / timer how much time it will take to compare my two images, please. Or any idea I can implement it on my side keeping resemble library as it is? Thanks.
Currently, Resemble.js doesn't work on IE9/IE10. It'd be great if it could work on them.
Also, trying to run the image comparison example on the demo page says the images are the same on IE10, and will fail due to the FileReader usage on IE9.
Hi,
it's possible to compare multiple images on the background? I want that the user upload one image that will be compared with 1'000 images on a ftp server and show the image with the less difference.
Can this be done with resemble.js ?
Thanks!
If I compare a 100x100px solid white (#FFFFFF
) image to a 100x100px image that is pure #FAFAFA
, despite being able to visually see a difference in these two files, Resemble still thinks there is no difference between them.
Is there a way to max out Resemble's accuracy? So that even if I just change a single pixel from #FFFFFF
to #FEFFFF
it would result in a mismatch/fail?
I just need to know if two images are literally pixel-for-pixel identical. I'm working with lossless png compression algorithms and need to verify that the compressed images they produce truly are lossless.
If you know of a better tool for this that can be ran with node (so I can automate my testing process), that would be helpful as well.
The example images I used:
0.png | 1.png |
---|---|
My code:
var resemble = require("node-resemble-js");
var fileA = "0.png";
var fileB = "1.png";
var diff = resemble(fileA).compareTo(fileB).ignoreNothing().onComplete(function(data){
console.log(data);
});
Which when ran returns:
{ isSameDimensions: true,
dimensionDifference: { width: 0, height: 0 },
misMatchPercentage: '0.00',
analysisTime: 15,
getDiffImage: [Function] }
In resemble.js
I changed the following line:
data.misMatchPercentage = (mismatchCount / (height*width) * 100).toFixed(2);
to:
data.numberOfDifferingPixels = mismatchCount;
data.totalNumberOfPixels = height * width;
data.misMatchPercentage = (mismatchCount / (height*width) * 100).toFixed(2);
but numberOfDifferingPixels
just returns 0. So obviously there is something either wrong with the settings I'm using, or with the logic that Resemble is currently using.
If I change the isColorSimilar
function to:
function isColorSimilar(a, b, color){
if(a === b){
return true;
} else {
return false;
}
}
it seems to work correctly. Perhaps pass in a boolean value for "highAccuracy" that, if true, runs the code above, like:
function isColorSimilar(a, b, color, accuracy) {
if ( typeof a === 'undefined' || typeof b === 'undefined' ) {
return false;
}
var absDiff = Math.abs(a - b);
if ( accuracy && (a === b) ) {
return true;
} else if ( accuracy ) {
return false;
} else if ( (a === b) || (absDiff < tolerance[color]) ) {
return true;
} else {
return false;
}
}
Then users can just do:
var diff = resemble(fileA).compareTo(fileB).ignoreNothing().highAccuracy().onComplete(function(data){
console.log(data);
});
That's how I'd do it anyway. However that would make the "ingoreNothing" misleading.
How to use resemble.js without npm ?
<script src="http://huddle.github.io/Resemble.js/resemble.js"></script>var timer=setInterval(function(){
resemble(ak).compareTo(whiteimg).onComplete(function(){
console.log(data);
},2000);
This giving Error in Console: Uncaught SyntaxError: Unexpected end of input (index:1)
The current bower.json configuration is causing issues with grunt concat for me. I believe the issue is that "Resemble.js" is capitalized in field "main" causing the file resemble.js to not be found. I've worked around this issue but it may cause others problems so I suggest a change to make it lower case.
Hope this helps.
We compare mostly images of 3D objects on white background. The image size is always the same (1024x768). Depending on the object size (a ball vs a pencil) the percent of difference does not reflect the reality. Would it be possible to add an option to skip white (or the specified flat background color) from the percent of difference value?
Thanks.
Hello sir!!
I am unable to compare two image files generated during runtime and stored as variables e.g.(var a, var b) using Resemble.js
I am trying to do this in a single javascript file
Please help!!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.