Compare rotated images using javascript

Question

I have got a sample images and a set of other images with which i want to compare the first image. So I am drawing both of them to a canvas and checking if they are same.

i have used the concept here: Compare two Images in JavaScript

The problem is the images are rotated at a random angle. so the base64 value of the images doesn’t seem to match with each other.

NOTE:I have no way to calculate the angles and trial and error is too resource consuming

match=-1;
for(i=0;i<7;i++)
        {
            context1.drawImage(img,xPos[i],5,width[i],height,0,0,width[i],height);;
                if(canvas1.toDataURL()==samplecanvas.toDataURL()){
                    match=i+1;
                    break;
                }

            context1.clearRect(0, 0, canvas1.width, canvas1.height);
        }

In the above code i am iterating through images. I am given sample image at samplecanvas and canvas1 is where i draw my list of images. then i want to compare them. But i dont know how.

How can i compare two images which are rotated in different direction at random angles using JavaScript?

Can i compare colours?

Answer 1

Assuming the both images are rectangles, and rotating did not crop them, you can loop over all pixels in the canvas to determine the most upper, lower, left and right pixel(*), and from there you can rotate it into a position in which it will only be "correctly rotated" or upside down (or, for squares, 90° to the left or right), leaving you with fewer cases to check.
From there on, you can "subtract" one image from the other one and check whether the difference is close to zero or not.

(*): Theoretically, two corners would be enough, but more corners help to improve accuracy, as we're dealing with approximated values (because float).

var canvas = [];
var ctx = [];
for(var i = 1; i <= 7; i++)
{
    canvas[i] = document.getElementById('canvas' + i);
    ctx[i] = canvas[i].getContext('2d');
    ctx[i].translate(250, 250);
}
var img = new Image();
var result = document.getElementById('result');

var diffCanvases = function(c1, c2)
{
    var other = c2.getImageData(0, 0, 500, 500).data;
    return c1.getImageData(0, 0, 500, 500).data.map(function(val, i)
    {
        return Math.abs(val - other[i]);
    }).reduce(function(previous, current)
    {
        return previous + current;
    });
};

var drawRotatedImage = function()
{
    var angle1 = Math.random() * 2 * Math.PI;
    var angle2 = Math.random() * 2 * Math.PI;
    ctx[1].rotate(angle1);
    ctx[2].rotate(angle2);
    ctx[1].drawImage(img, -200, -150);
    ctx[2].drawImage(img, -200, -150);
}

var undoRotation = function()
{
    var data = [ctx[1].getImageData(0, 0, 500, 500).data, ctx[2].getImageData(0, 0, 500, 500).data];
    var extremes = [{}, {}];
    for(var i = 0; i < 2; i++)
    {
        top:
        for(var y = 0; y < 500; y++)
        {
            for(var x = 0; x < 500; x++)
            {
                if(data[i][(y * 500 + x) * 4] + data[i][(y * 500 + x) * 4 + 1] + data[i][(y * 500 + x) * 4 + 2] + data[i][(y * 500 + x) * 4 + 3] > 0)
                {
                    extremes[i].top = {x: x, y: y};
                    break top;
                }
            }
        }
        bottom:
        for(var y = 499; y >= 0; y--)
        {
            for(var x = 499; x >= 0; x--)
            {
                if(data[i][(y * 500 + x) * 4] + data[i][(y * 500 + x) * 4 + 1] + data[i][(y * 500 + x) * 4 + 2] + data[i][(y * 500 + x) * 4 + 3] > 0)
                {
                    extremes[i].bottom = {x: x, y: y};
                    break bottom;
                }
            }
        }
        left:
        for(var x = 0; x < 500; x++)
        {
            for(var y = 0; y < 500; y++)
            {
                if(data[i][(y * 500 + x) * 4] + data[i][(y * 500 + x) * 4 + 1] + data[i][(y * 500 + x) * 4 + 2] + data[i][(y * 500 + x) * 4 + 3] > 0)
                {
                    extremes[i].left = {x: x, y: y};
                    break left;
                }
            }
        }
        right:
        for(var x = 499; x >= 0; x--)
        {
            for(var y = 499; y >= 0; y--)
            {
                if(data[i][(y * 500 + x) * 4] + data[i][(y * 500 + x) * 4 + 1] + data[i][(y * 500 + x) * 4 + 2] + data[i][(y * 500 + x) * 4 + 3] > 0)
                {
                    extremes[i].right = {x: x, y: y};
                    break right;
                }
            }
        }
    }
    var angles = [];
    for(var i = 0; i < 2; i++)
    {
        // Diagonals yield the highest accuracy
        var topBottom = Math.atan((extremes[i].bottom.y - extremes[i].top.y) / (extremes[i].bottom.x - extremes[i].top.x));
        var leftRight = Math.atan((extremes[i].left.y - extremes[i].right.y) / (extremes[i].left.x - extremes[i].right.x));
        angles.push(((topBottom + leftRight + Math.PI) / 2) % (Math.PI / 2));
    }
    ctx[3].rotate(-angles[0]);
    ctx[3].drawImage(canvas[1], -250, -250);
    for(var i = 0; i < 4; i++)
    {
        ctx[4 + i].rotate(-angles[1] + Math.PI * i / 2);
        ctx[4 + i].drawImage(canvas[2], -250, -250);
    }
    result.textContent = 'Canvas 3 vs 4: ' + diffCanvases(ctx[3], ctx[4]) + '\n' +
                         'Canvas 3 vs 5: ' + diffCanvases(ctx[3], ctx[5]) + '\n' +
                         'Canvas 3 vs 6: ' + diffCanvases(ctx[3], ctx[6]) + '\n' +
                         'Canvas 3 vs 7: ' + diffCanvases(ctx[3], ctx[7]) + '\n';
}

img.addEventListener('load', function()
{
    drawRotatedImage();
    undoRotation();
});
img.crossOrigin = '';
img.src = 'https://i.imgur.com/o2scuuY.jpg';

canvas
{
    border: solid 1px #999;
    display: block;
}
#result
{
    white-space: pre;
}

Original canvases:
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
Canvas 1 "fixed":
<canvas id="canvas3" width="500" height="500"></canvas>
All options for canvas 2 "fixed":
<canvas id="canvas4" width="500" height="500"></canvas>
<canvas id="canvas5" width="500" height="500"></canvas>
<canvas id="canvas6" width="500" height="500"></canvas>
<canvas id="canvas7" width="500" height="500"></canvas>
<div id="result"></div>

In this version, a single pixel shift will make a huge difference already. This could easily be minimised by detecting the top and left offsets of all "fixed" images, comparing those of the first canvas with the other four canvases, and adjusting the images to even out the differences.
But I've messed enough with canvases and images today for my taste.

Example image taken from LoremPixel.

Answer 2

If you don't know the rotation angles than it's a classic image matching case in computer vision.

Image matching is computationally heavy and not suitable for web applications.

I would try to find a way to calculate the rotation angles and rotate the image back before comparing. If there is no other way, I would implement an image matching rest api using opencv or similar libs.

EDIT

In order to access the canvas pixel data use getImageData function.

Answer 3

"Same" like.. .really, but really same? Almost impossible.
As soon an image is rotated, probably is cropped trimmed etc. (you missed to explain what are the edge cases and show some code).

Just to give you an idea how to approach to the problem:

• I'd convert both images to B/W (to get 0 zeros for white and 1 ones for black data)
• Remove noise (filter/clean the isolated "1"(black) pixels data)
• Overlap the images and rotate one from 0-359 degree steps
• On every step (rotation) process the average exclusion algorithm (basically 1-1=0)
• Than process the entire merged result chunk by chunk

So basically if the merged result is an almost completely white (mostly "0"zeroes) result -
you have a possible match.