Resemble.js
Image analysis and comparison
I'm trying to use the resemblejs library (http://huddle.github.io/Resemble.js/) to compare two images. However, when I have created a directory and added resemblejs as a dependency, but when I try to run the following:
nodejs test.js, I get the following error
var api = resemble(fileData).onComplete(function(data){
^
ReferenceError: resemble is not defined
I've never used NodeJS before, so it might be something really simple. Any ideas?
Source: (StackOverflow)
I have two image object ak whiteimg.
User is clearing the area of one image and i want to compare the two images every 2 sec.
<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);
Am i doing anything wrong ? I am also waiting for images to load and then performing operation.
Error in Console:
Uncaught SyntaxError: Unexpected end of input (index:1)
Source: (StackOverflow)
I'm using node-resemble-js to compare two PNG images.
The comparison happens without issue and I get a successful/relevant response however I'm having trouble outputting the image diff.
var express = require('express');
var fs = require('fs');
var resemble = require('node-resemble-js');
var router = express.Router();
router.get('/compare', function(req, res, next) {
compareImages(res);
});
var compareImages = function (res) {
resemble.outputSettings({
largeImageThreshold: 0
});
var diff = resemble('1.png')
.compareTo('2.png')
.ignoreColors()
.onComplete(function(data){
console.log(data);
var png = data.getDiffImage();
fs.writeFile('diff.png', png.data, null, function (err) {
if (err) {
throw 'error writing file: ' + err;
}
console.log('file written');
});
res.render('compare');
});
};
module.exports = router;
It writes to diff.png as expected however it's not creating a valid image.
Any ideas where I'm going wrong? Feel like I'm pretty close but just unsure of final piece.
Thanks
Source: (StackOverflow)
I'm trying to add visual comparison tests to my layouts but it seems I've not configured my testing environment correctly.
I'm using:
This is my test JS file:
var url, screenshotRoot, modules, phantomCSS, page;
url = 'http://website.local';
screenshotRoot = 'tests/screenshots';
modules = '../node_modules';
phantomCSS = require(modules + '/phantomcss/phantomcss.js');
page = { width: 1024, height: 768 };
phantomCSS.init({
screenshotRoot: screenshotRoot,
failedComparisonsRoot: screenshotRoot + '/failures',
libraryRoot: modules + '/phantomcss',
});
casper
.start(url)
.then(function() {
phantomCSS.screenshot("body", "elements-cheatsheet");
})
.then(function() {
phantomCSS.compareAll();
})
.run(function() {
phantom.exit(phantomCSS.getExitStatus());
});
casper.viewport(page.width, page.height);
When I run casperjs test tests/layout.js the test starts, creates the screenshot and throws an error:
[PhantomCSS] Can't find Resemble container. Perhaps the library root is mis configured. (../node_modules/phantomcss/ResembleJs/resemblejscontainer.html)
I've checked the location of resemblejscontainer.html file and it's exactly in the location listed in the thrown error.
Where I'm wrong?
Source: (StackOverflow)
I'm trying to use Resemble.js in node. I had a bit of trouble getting canvas/cairo installed (something to do with a mix of OS X Mavericks/XQuarts and Homebrew) but got there eventually.
Got pretty far, but I've hit a wall with this.
function ImageSimilarityChecker(){
var resemble = require("resemble").resemble;
var fs = require("fs");
var util = require("util");
this.admitImage = function(imagePath)
{
fs.readFile(imagePath, function (err, fileData)
{
if (err) throw err;
else
{
var api = resemble(fileData).onComplete(function(data){
console.log(imagePath);
console.log(util.inspect(data));
});
}
});
}
}
new ImageSimilarityChecker().admitImage("./public/images/test.jpg");
Results in this error:
/Users/pcoghill/Projects/imgManip/auth/Servers/Farm/node_modules/resemble/lib/server.js:38
context.drawImage(hiddenImage, 0, 0, width, height);
^
Error: Image given has not completed loading
at load (/Users/pcoghill/Projects/imgManip/auth/Servers/Farm/node_modules/resemble/lib/server.js:38:15)
at module.exports.loadImageData (/Users/pcoghill/Projects/imgManip/auth/Servers/Farm/node_modules/resemble/lib/server.js:11:7)
at Object.onComplete (/Users/pcoghill/Projects/imgManip/auth/Servers/Farm/node_modules/resemble/resemble.js:508:5)
at /Users/pcoghill/Projects/imgManip/auth/Servers/Farm/resembleFile.js:14:39
at fs.js:271:14
at Object.oncomplete (fs.js:107:15)
I'm pretty new to node, so I don't see how the image hasn't loaded. It's a local file and I'm handling it on the read completed callback (or so I think).
A little digging around makes me think this is an issue in canvas when reading jpg files, but I'm struggling to understand the details. I've found this question, which looks very similar, but I can't see how to convert this to my situation.
Could someone explain how I could fix this and what I'm doing wrong?
Source: (StackOverflow)
I'd like to cut several circular parts (Px) out of a big image (A) and compare them pixel by pixel to same sized round portions (Qx) of another big image (B) using resemble.js (or similar, but I did not find anything else which seems suitable) to get a factor of similarity.
Update:
With the "factor of similarity" I mean the average of the color distance (length of rgb vector between both pixels) of one pixel of Px to the corresponding pixel of Qx. If both images are exactly the same then the images are 100% identical, factor would be 1. If they are identical but one is inverted, they are 0% identical because each pixel has the maximum possible color distance to the corresponding one of the image to compare. In this case, the factor would be 0.
The aim is to find the Px which fits best Qx at any orientation (5 degrees rotation steps), and to replace Qx with Px in the final image at the best fitting angle.
Imagine some kind of photo mosaic. I want to reassamble a given image by circular smaller images that are all in a big image for conveniance. First I have to cut them out, then place them on the photo in a hex grid manner. The challenge is to find which fits best at which position and in what orientation.
I am usually a C# backend developer, my JavaScript knowledge is pretty basic.
If it is not neccessary to cut out images at all and my approach is not like an experienced JS frontend developer would do that, please say so.
Thanks for all answers and comments in advance!
Source: (StackOverflow)
I'm trying to take 2 screenshot from a website -
One before an injection into the site, and one after.
Problem is - when I try to take the first screenshot after all the assets were loaded (and before I inject my script) - it won't create the screenshot from inside the onInitialized function.. any clue why?
page.onInitialized = function () {
page.render('e1.png');
page.evaluate(function () {
<here i'm injectingo the page>
});
};
Also - how can I compare between the 2 screenshots with resemble js? I installed the package with npm, and i'm running the test with phantomjs, so what is the way to save the screenshot created via phantomjs into variables and then compre with resemble.js?
I'll be glad to see a code which is working for my need.
Thank you very much!!
Source: (StackOverflow)