Compare images in node.js (using e.g. opencv) - javascript

What I want to do is to get an image diff using node.js.
Ultimately I want to have a method expecting e.g. two filepaths or image data outputting the subtraction of both. Somehow like the compare function in imagemagick.
Something like:
var comparison_result = compareModule.compare('./image1.png', './image2.png');
Also, I would like to get the position of the spots in the resulting image that mark the differences.
Like this:
comparison_result.forEach(function(difference) {
console.log("A difference occurred at " + difference.x + "|" + difference.y);
});
I installed node-opencv, however I can not find a documentation that maps basic opencv c++ functions to node.js.
The function I would like to use is cvSub.
I would like to avoid js-imagediff as it works with canvas, has a dependency to "cairo" and I am not sure whether I can access the spots because in the documentation it rather seems like it just returns the difference as an image.

I have never tried to calculate per-element difference by cv::addWeighted() but it may work in practice:
var diff = new cv.Matrix(first.width(), first.height());
diff.addWeighted(first, 1.0, second, -1.0);
In native code (C++), this function can be replaced with the expression below:
diff = first*1.0 + second*(-1.0) + 0.0;
p.s.: node-opencv's authors published a sample code for measuring similarity:
node-opencv / examples / dissimilarity.js

Related

JavaScript function is only working the first time I call it?

I was wondering whether you guys could help me troubleshoot an issue I'm having. Hopefully identifying the problem won't require you look into the documentation of the graphics package I'm using, but if it does, here you go: http://raphaeljs.com/reference.html#Element.transform.
I have the following block of code
window.setInterval(function()
{
mycirc.transform("t1,1");
}, 500);
which of course should call the function mycirc.transform("t1,1") every half-second. That function is supposed to translate the x and y coordinates of mycirc each by 1 unit (look at Element.transform([tstr]) on http://raphaeljs.com/reference.html#Element.transform).
However, when I test my page, mycirc gets translated once and then the subsequent calls have no effect. I used console.log(...) to test and make sure:
window.setInterval(function()
{
var bb = mycirc.getBBox();
console.log("coords before transformation: " + bb.x + "," + bb.y);
mycirc.transform("t1,1");
var bb = mycirc.getBBox();
console.log("coords after transformation: " + bb.x + "," + bb.y);
}, 500);
yields
coords before transformation: 120.98508107696858,106 jsfunctions.js:411
coords after transformation: 121.98508107696858,107 jsfunctions.js:414
coords before transformation: 121.98508107696858,107 jsfunctions.js:411
coords after transformation: 121.98508107696858,107 jsfunctions.js:411
etcetera.
Any idea why this might be?
(I tried to look through the source code for the graphics package, but it's unreadable because of no whitespace.)
your code
mycirc.transform("t1,1");
isn't relative to current state. It just transforms from original state to t1,1 and then from t1,1 to t1,1 etc.
You should calculate transformation every time.
EDIT: So it would need a global variable, incremented every time like:
var xyPos = 1;
window.setInterval(function()
{
mycirc.transform("t"+xyPos+","+xyPos);
xyPos++;
}, 500);
In the usage section of the docs you linked, it shows how to prepend and append transformations. This implies to me that you code will just reset the transformation to the same thing every time. I have never used this graphics library, so I can't say for sure, but try something like the following and see if it works:
mycirc.transform("t1,1");
mycirc.transform("...t1,1");
mycirc.transform("...t1,1");
mycirc.transform("...t1,1");
I believe that will apply the same transform 4 times. Of course, you will then need to convert this logic into an interval for your use.
I think this is expected behavior. Quoting the docs:
Adds transformation to the element which is separate to other
attributes, i.e. translation doesn’t change x or y of the rectange.
Try:
var amount = 1;
window.setInterval(function()
{
mycirc.transform("t" + [amount, amount].join(','));
amount++;
}, 500);

simplifying the contents of an input using the javascript math system

This obviuosly works perfectly:<script>alert(5*8-4)</script>
but i need to solve whatever someone puts inside an input box.
Heres what I thought of doing: I would get the value of the input, into a variable. then I would use
document.write("<script>alert("+theinputvalue+")<script>");
or do this:
var string="<script>alert("+theinputvalue+")<script>";document.write(string);
but nothing works.
Is it even possible to do this? if not, tell my what simple other system I could use.
eventually, I will use it to graph lines like this:
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d")
for(var x=-100; x<100; x=x+.2){
y = .1*(x*x)
ctx.fillRect(x+50, -1*y+50, 2, 2);
}
http://jsfiddle.net/KGgq4/
eval('5*8-4')
will result in 36
I'm not aware of any library that is doing that (this doesn't mean that there are no such it simply means I never actually needed that) but what you should end up doing is to build an automata that will parse input string and transform it to a proper graph with proper transformations. This is not very easy topic and if you want to go this route you should start reading on arithmetic expressions parsing algorithms (sorry I do not have any solution in place).
Or you can cheat and define types of equations that will be selected by user. Once user selects type of equation you should be able show user inputs where user will be able to select coefficients. You can read those coefficients into different variables and apply transformations in your draw procedure (For example if user will select type sin(x) you know that general equation has following formula: y = k*sin(a*x + b) + c. So once it is selected you can allow user to enter k, a, b, c and based on that input calculate appropriate locations of points for your graph.)
Well, third solution could involve "eval ", but usually you should avoid eval at any cost (B/c it is straight forward JavaScript injection which may be an OK for this case but may get you in trouble later in your life. ).
You can use math.js, which comes with an advanced expression parser. It supports definition of variables and functions.
// create an instance of math.js
var math = mathjs();
// evaluate an expression
math.eval('5*8-4'); // 36
// user defined function (returns a native JavaScript function)
var f = math.eval('f(x) = 2*x^2 + 6');
// use the function (for graphing or something)
f(2); // 14

Simple node.js readline on the console

I'd like to teach students how to program using JavaScript. I don't want to introduce new students to call-backs or any other complex program structure. Looking at Node.js the readline used for standard input uses a call-back. For simple input data, then do a calculation, I'd like a simple equivalent to an input like Python or other similar languages have:
width = input("Width? ")
height = input("Height? ")
area = width * height
print("Area is",area)
Is there some way to do this with JavaScript?
The module readline-sync, (source can be found here, npm page here) will do what you want, it looks like.
If you'd prefer to work at a lower level, it looks like it works by passing the stdin file descriptor (stdin.fd) to the synchronous fs methods. For example:
fs.readSync(stdin.fd, buffer, 0, BUF_SIZE)
There is sget as well, a simpler and bit saner module I wrote that accomplishes what the OP is asking for.
var sget = require('./sget');
var width = sget('Width?'),
height = sget('Height?'),
area = width * height;
console.log('Area is', area);

How can you perform varying base logarithmic functions in Javascript?

This problem is being asked with a node.js server in mind, but I stated the question as "javascript" because I will likely use this same logic for a client-side script, as well.
Here's the problem: given a set of x values, y needs to scale in a logarithmic way. The Math object performs a natural log [ln(x)], but does not provide an interface for specifying the base of the logarithm.
For a specific example, I need to find the following:
log[512](2)
Which should return .1111~
However, I do not see an interface that allows me to accomplish this, nor can I seem to find a library that exposes an option for the log's base. Surely this is a common problem and has a solution, but my searching has only found solutions for different/unrelated problems. Ideas?
You can use the logarithm base change formula:
log[a](n) = log[b](n) / log[b](a)
So in order to get log(2) base 512, use:
function log(b, n) {
return Math.log(n) / Math.log(b);
}
alert(log(2, 512));
Note that Math.log above uses the natural log base; i.e., it would be written as ln mathematically.
I found this answer as a first result in google today, and if anyone else finds it too, there's a small mistake. The correct version is as follows:
function log(b, n) {
return Math.log(n) / Math.log(b);
}

how can website javascript code using same input data compute a different result depending on visitor?

The javascript code snippet below is on a website. Recently I've observed the code can produce different results for a visitor on the website than I obtain from my computer using the exact same data that the visitor input to the website. This seems to be visitor dependent (some visitors are fine). I've tried several computers/operating systems in my office, and they all produce the same (correct) results as each other, derived from the visitor's input data in question.
Part of the results (not shown below) provided by the website is a plot of the user's entered data, which I observe is always correct, so I know the visitor's input data they entered into the website (from which the javascript computation uses to compute a result) are interpreted correctly by their machine (I can see the plot the user receives (generated by auto-PDF email), and the same data entered in my computer produces the exact same plot for the entered data; just the results derived from this data are different).
In one case I analyzed, the visitor's incorrect data, mysteriously, was always a factor of 1.3 lower than the correct result. It doesn't seem like a rounding error or difference in 32b vs 64b OS.
Any ideas what could be causing such a thing? Is the code below not robust for all versions of javascript, or could different javascript versions product different results (seems hard to believe, but I'm using some fancy math below, maybe one of the mat functions is antiquated). Unfortunately I don't have access to a machine producing incorrect data to troubleshoot. I also don't know anything about the machine/OS/platform used by visitors (could be anything). Any ideas appreciated. I'm not that experienced with javascript (it could be something obvious below).
Thanks in advance.
function calculate(){
var fc=document.abcform.CF.value*1;
var of = new Array(20);
var pn = new Array(20);
var pj = new Array(19);
var cbox = new Array(20);
var alpha;
var con;
var segment;
var subttl=0;
of[0]=document.abcform.OS1.value*1; pn[0]=document.abcform.abc1.value*1;
of[1]=document.abcform.OS2.value*1; pn[1]=document.abcform.abc2.value*1;
of[2]=document.abcform.OS3.value*1; pn[2]=document.abcform.abc3.value*1;
of[3]=document.abcform.OS4.value*1; pn[3]=document.abcform.abc4.value*1;
of[4]=document.abcform.OS5.value*1; pn[4]=document.abcform.abc5.value*1;
of[5]=document.abcform.OS6.value*1; pn[5]=document.abcform.abc6.value*1;
of[6]=document.abcform.OS7.value*1; pn[6]=document.abcform.abc7.value*1;
of[7]=document.abcform.OS8.value*1; pn[7]=document.abcform.abc8.value*1;
of[8]=document.abcform.OS9.value*1; pn[8]=document.abcform.abc9.value*1;
of[9]=document.abcform.OS10.value*1; pn[9]=document.abcform.abc10.value*1;
of[10]=document.abcform.OS11.value*1; pn[10]=document.abcform.abc11.value*1;
of[11]=document.abcform.OS12.value*1; pn[11]=document.abcform.abc12.value*1;
of[12]=document.abcform.OS13.value*1; pn[12]=document.abcform.abc13.value*1;
of[13]=document.abcform.OS14.value*1; pn[13]=document.abcform.abc14.value*1;
of[14]=document.abcform.OS15.value*1; pn[14]=document.abcform.abc15.value*1;
of[15]=document.abcform.OS16.value*1; pn[15]=document.abcform.abc16.value*1;
of[16]=document.abcform.OS17.value*1; pn[16]=document.abcform.abc17.value*1;
of[17]=document.abcform.OS18.value*1; pn[17]=document.abcform.abc18.value*1;
of[18]=document.abcform.OS19.value*1; pn[18]=document.abcform.abc19.value*1;
of[19]=document.abcform.OS20.value*1; pn[19]=document.abcform.abc20.value*1;
cbox[0]=document.abcform.c1.checked; cbox[1]=document.abcform.c2.checked; cbox[2]=document.abcform.c3.checked;
cbox[3]=document.abcform.c4.checked; cbox[4]=document.abcform.c5.checked; cbox[5]=document.abcform.c6.checked;
cbox[6]=document.abcform.c7.checked; cbox[7]=document.abcform.c8.checked; cbox[8]=document.abcform.c9.checked;
cbox[9]=document.abcform.c10.checked; cbox[10]=document.abcform.c11.checked; cbox[11]=document.abcform.c12.checked;
cbox[12]=document.abcform.c13.checked; cbox[13]=document.abcform.c14.checked; cbox[14]=document.abcform.c15.checked;
cbox[15]=document.abcform.c16.checked; cbox[16]=document.abcform.c17.checked; cbox[17]=document.abcform.c18.checked;
cbox[18]=document.abcform.c19.checked; cbox[19]=document.abcform.c20.checked;
for (var i = 0; i <= 18; i++) { pj[i] = '' }
for (var j = 1; j <= 19; j++){
if (j == 1 || cbox[j]) {
alpha = (pn[j-1] - pn[j])/(10*(Math.LOG10E*Math.log(of[j]/of[j-1])));
con = (Math.pow(of[j-1],alpha))*(Math.pow(10,0.1*pn[j-1]));
if ((alpha <= (1 + 1e-14)) && (alpha >= (1 - 1e-14))) {
segment = con*Math.log(of[j]/of[j-1]); }
else { segment = (con/(1-alpha))*(Math.pow(of[j],1-alpha)-Math.pow(of[j-1],1-alpha)); }
pj[j-1] = round(1E12*(Math.sqrt(2*segment))/(2*Math.PI*fc));
subttl = subttl + Math.pow(pj[j-1],2);
} else {break;}
}
document.abcform.pj1.value=pj[0]; document.abcform.pj2.value=pj[1]; document.abcform.pj3.value=pj[2];
document.abcform.pj4.value=pj[3]; document.abcform.pj5.value=pj[4]; document.abcform.pj6.value=pj[5];
document.abcform.pj7.value=pj[6]; document.abcform.pj8.value=pj[7]; document.abcform.pj9.value=pj[8];
document.abcform.pj10.value=pj[9]; document.abcform.pj11.value=pj[10]; document.abcform.pj12.value=pj[11];
document.abcform.pj13.value=pj[12]; document.abcform.pj14.value=pj[13]; document.abcform.pj15.value=pj[14];
document.abcform.pj16.value=pj[15]; document.abcform.pj17.value=pj[16]; document.abcform.pj18.value=pj[17];
document.abcform.pj19.value=pj[18];
document.abcform.tj.value=round(Math.sqrt(subttl));
}
function round(x) { return Math.round(x*100000)/100000; }
Doesn't seem like a rounding error or
difference in 32b vs 64b OS.
Why not... this is exactly what it seems like. Maybe even a 16bit machine for that matter. You are doing lots of crazy floating point operations -- they typically perform lots of truncation and rounding.
Option two: The log or pow or sqrt functions are implemented differently on different browsers. Solution -- implement your own and see if you get the same "different" results.
Definitely sounds like rounding errors to me, and it doesn't matter what the underlying elements are (64 bit, 32 bit, implementations of pow, etc).
Consider:
alpha = (pn[j-1] - pn[j])/(10*(Math.LOG10E*Math.log(of[j]/of[j-1])));
(Math.pow(of[j-1],alpha))*(Math.pow(10,0.1*pn[j-1]))
That right there can have different results, since it's all floating math. You'll have to either use ints, or something like BigNumber.
In cases like that printf debugging is sometimes helpful - print out all the intermediate values (like alpha) for all the iterations and then compare the outputs to see where they are different. Gives you a starting point.
After debugging, it turns out this is related to a loss of precision by converting to scientific notation in code not shown above. Thus, it's a non-javascript issue (e.g. user error). Thanks for all of the insight above though.

Categories