rsmbl / resemble.js Goto Github PK

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

How can I pass link to an image? I get Cross-Origin error when I try that

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!

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

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).

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.

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.

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.

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).

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?

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:

• Regex
• Cross origin

Why not always set the crossorigin to anonymous?

Explanation of issue

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.

Details on my test

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] }

Playing with the source code

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.

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

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?

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?

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

/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)

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.

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.

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?

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);

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!!

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.

How to use resemble.js without npm ?

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)

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.

I tried to use it with PhantomCSS, but it haven't failed in some cases: when background of the element isn't set, so it's transparent.

You can try it with these two images:

Image 1

Image 2

The issue is only with the black #000 color.

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.

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

Just find it useful and simple to deploy. But would like to know the algorithms or theories behind in comparing the image?

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

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.

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.

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?

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.

hii guys..
I was using your project with NightwatchJS for screenshot comparison for automated testing.
There seems to an issue i am getting every time "Image is not defined"

Any help will be highly appreciated
Thanks in advance

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:

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 @jamescryer ,

The ImageData of the attached "full-white" bitmap gives all the pixels with RGB values equal to 254 instead of 255

Any ideas?

TestWhite.zip

Hi,

Is it possible to get the bounding box in pixel units of the areas of the image that have changed?

Thanks,

Any way to retrieve the regions w/ differences?

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.

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.

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

As per title. Setting transparency to 0.01 (or similar) is a workaround, but not pretty.

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 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 ?

To reproduce:

1. Go to http://huddle.github.io/Resemble.js/
2. In the Compare Two Images section, upload two large screenshots (at least 1200x1200 or more, eg http://i.imgur.com/f4Zy09J.jpg & http://i.imgur.com/kvOUgOI.jpg). Note that the diff image is as expected.
3. Switch to 'Ignore Antialiasing'; note that the diff image has a cross-hatch pattern.

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