We Keep Coding

How to find one image inside of another? Node.js

I have 2 bmp images. ImageA is a screenshot (example) ImageB is a subset of that. Say for example, an icon.
I want to find the X,Y coordinates of ImageB within ImageA (if it exists).
Any idea how I would do that?

This is called optical-recognition. It may seem complicated (it is) but can be very simple in implementation, so don't shy away from it!
Let Image A be the image we're looking for, and Image B be the larger image with Image A in it.
Method 1
If Image A's scale in Image B hasn't been altered, and the colors are all preserved, you can place Image B on an HTML 5 canvas and iterate over the pixel data. You would load the first line of pixels from Image A and then iterate over every pixel in Image B. If a pixel was the same, you would store that pixels column in a variable and check if the next matched too. If the first row was a full match, then hop to the next row and compare those. You'd repeat that until you either got a match or hit an (or enough) pixels that didn't match. In that case, you would reset all variables and start all over again looking for a match to row 1.
Method 2
If Image A isn't perfectly identical in Image B, new complications arise and things become a lot more complicated. If only the scale changes, we can make a few tweaks to Method 1 to get something that works. Instead of grabbing any pixel and seeing if 80% or so matches, we additionally need to track the images sheer/compression.
In each row, go over pixel incrementally. For example, we'll check every tenth pixel. If we find a match for pixel 1, we then check 10 pixels away and see if that pixel exists anywhere in our row. If we find it, the distance from 0 to that pixel divided by 10 (our increment) is how many times larger the original image is.
If we found a pixel 20 slots from 0 in Image A, and it was only 10 pixels apart in Image B (remember, 10 is our increment), then our original image was 2 times larger. In other words, the new image is half the size of the original.
1) compression = target_width / original_width
2) compression = 20 / 10
3) compression = 2
This is a much more complex but robust way to detect a match. Enough matching rows mean you've got a matching image, but what about vertical stretching?
Similar logic. If you find a row that matches, start at 0 and go down by 10, then find that pixel's match in Image A.
Edit
The methods I provided are generic methods to work with looking for any image inside any other image. As you can imagine this is performance intensive. I don't know what image you're trying to detect but if there are common shapes, sometimes you can do alternative algorithms. If you have a circle, for example, you can just check that there are pixels that match outside a radius and pixels that are the same within.
The methods I presented also don't compensate for warping. Method 2 should be fine if the image is stretched but keeps a rectangular ratio. If the image has for example been warped into a circle shape, things get infinitely more complicated. For that case, the only hint I could give would be to check pixels within a radius of the original for matches.

How to make wave animation in HTML

I want to create wave animation with 3-4 waves in HTML.
and also I want to make responsive for mobile,tablet etc.
I have also attached the image which I want to use as wave.

You can remove the up and down movement of the elements by animating the transform property instead of the height of the elements.
You can use the scaleY() function to make the elements grow on the Y axis (height).
Making a wave animation

Javascript element opacity situation

Let's say i have a div element which opacity is set to 0.5 .
I have a script which function is to draw a rectangle over the div based on the first time the user clicks with the left mouse button on the div element and the way he drags the mouse over the div.
I am trying to figure out how to make the rectangle the user draws to not be affected by the opacity of the div container element.
For example if you upload a photo to google+ there is an option to crop some part of the image so only your face is visible. Thay have this kind of functionality i am looking for. When you draw the part over the image you'd like to crop the image opacity is set to 0.5 for example but the region you are drawing is clearly showing the original style of the image.

the opacity of a wrapping element is inherited by all containing elements,
you could simply solve this by creating a png-image with your desired opacity with size 1x1px and make this as background-image and repeat x and y

I think what you are trying to do is called masking, it can be achieved atleast with svg. You could have one layer with specific opacity and a mask with the rectangle properties to "burn a hole" in the opacity at a desired location.
Take a look at this:
http://www.html5rocks.com/en/tutorials/masking/adobe/#toc-the-mask-property

cleaning rectangular

I have a function in script that draws a rectangular on canvas.I want to clean the rectangular drew in the "if" condition.
I also have text on the canvas(its coordinates are 0,80) and it shouldn't be cleaned. Only the rectangular must be cleaned.
function red_stroke_2(yy)
{
//Red color edges
context.strokeStyle = "#f00";
context.strokeRect(0,yy,800,40);
}
if (Option1==answers[qnumber])
{
red_stroke_2(80);
}

Canvas is "stateless" in the sense that it does not know about the primitives that have been drawn or the calls that have been made. As such it is impossible to undo only a certain drawing call. If you need to modify the drawing, you need to redraw all of the items that you don't want to change. Of course you have the option to change single pixels, so if your text is black and the rectangle is red, you can replace all red pixels, but this won't work so good if antialiasing is enabled and is utterly complicated.
So either redraw the whole area (omit the rectangle drawing but render the text). Or consider using 2 Canvases on top of each other (one with the text, one with the background), then of course you can rerender the background without having to worry about the text.
Last but not least using SVG might be also an alternative, since this is stateful and consists of DOM elements that you can modify/insert/remove and the browser will do the compositing. In that case you would have a rect element and a textelement and you could simply remove the former.

This will put transparent pixels instead of your rectangle:
function clean_red_stroke(yy)
{
context.clearRect(0,yy,800,40);
}
//Call it with the same 'yy' you used in the drawing method
clean_red_stroke(80);
However I think you code could be improved, by using more variables (and consequently a most generic function) for exemple.

HTML5: inaccurate positioning of rectangles

I'm using canvas of HTML5 to create a "preview" image which mainly consists of some rectangles and simple lines. Works fine so far, but there's one problem I cannot fix somehow. Presume the following situation:
context.fillStyle = "rgba(0,0,0,0.75)";
context.fillRect(100.64646,100,50.94967,20);
context.fillRect(100.64646+50.94967,100,100,20);
So I'm drawing 2 rectangles with some opacity. The x-starting coordinate plus the x-length of the first rect is equal to the x-starting coordinate of the second rect, so in theory they should collide without any margin between. Sadly, the result is different:
(see http://files.clemensfreitag.de/thin_spacing.jpg)
There's a very tiny spacing between the boxes, and the background color is visible. But:
This problem doesn't occur if the coordinates and lengths are integer values.
Is there any way to get it done by using float values? Converting them to integers before drawing might be acceptable in my application, but I'm just wondering why this should not work with floats.
Best,
Clemens

What you're seeing is the result of overlaying two opaque colors. When the first rectangle ends at 151.59613, the rectangle is automatically antialiased, filling in the rightmost column with rgba(0,0,0,0.4470975). When the second rectangle starts at the same x coordinate, it is also antialiased, filling in the leftmost column (the same as the first rectangle's rightmost) with rgba(0,0,0,0.3029025). The two values do add up to rgba(0,0,0,0.75), but that's not how they are blended. Instead, the second color (rgba(0,0,0,.3029025)) is drawn on top of the first, resulting in rgba(0,0,0,0.4470975+(1-0.4470975)*0.3029025) = rgba(0,0,0,0.61457305). So there isn't actually a gap between the two rectangles, but rather a 1px column that is a slightly lighter shade of grey.
Similarly, if you were using solid colors then the second rectangle's antialiased column would overwrite the first's, resulting in an even lighter shade of grey in the "gap".
The issue does not show up with integer values because no antialiasing is required - each rectangle ends at the edge of a pixel.
It looks like none of the globalCompositeOperation settings fix this, and turning off antialiasing would sometimes result in a 1px gap, so I think your simplest solution is to force integer values (alternatively, you could clear that column then fill it in with the desired color).

This problem is related to the way objects are drawn on a float based grid (especially vertical and horizontal lines and thus rects).
See there for an explanation and a schema : http://canop.org/blog/?p=220
Depending on the size of your objects, you need to use integer or mid-integer coordinates and sizes for your shapes, the goal being to fill complete pixels in both dimensions.
For example :
use a mid-integer for a thin line (one pixel width)
use an integer coordinate for a 2 pixels wide line
(and extend the logic for rects)