imageDiff.js

canvas1 = document.getElementById("canvas1");
surface1 = canvas1.getContext("2d");
image1 = new Image();

canvas2 = document.getElementById("canvas2");
surface2 = canvas2.getContext("2d");
image2 = new Image();

image1.onload = function () {

    // Setting the size also clears the canvas:
    canvas1.width = image1.width;
    canvas1.height = image1.height;

    if (canvas1.width > 400) {
        canvas1.width = 400;
        canvas1.height = Math.round(400.0 * image1.height / image1.width);
    }
    if (canvas1.height > 400) {
        canvas1.height = 400;
        canvas1.width = Math.round(400.0 * image1.width / image1.height);
    }

    surface1.drawImage(image1, 0, 0, canvas1.width, canvas1.height);

    hash1 = differenceHash(image1);
    try {
        document.getElementById("hash1").innerText = "Image 1: " + bin2hex(hash1);
    }
    catch (exception) {
    }
    try {
        document.getElementById("hash1").textContent = "Image 1: " + bin2hex(hash1);
    }
    catch (exception) {
    }

    try {
        compare()
    }
    catch (exception) {
    }
};

image2.onload = function () {

    // Setting the size also clears the canvas:
    canvas2.width = image2.width;
    canvas2.height = image2.height;

    if (canvas2.width > 400) {
        canvas2.width = 400;
        canvas2.height = Math.round(400.0 * image2.height / image2.width);
    }
    if (canvas2.height > 400) {
        canvas2.height = 400;
        canvas2.width = Math.round(400.0 * image2.width / image2.height);
    }

    surface2.drawImage(image2, 0, 0, canvas2.width, canvas2.height);

    hash2 = differenceHash(image2);
    try {
        document.getElementById("hash2").innerText = "Image 2: " + bin2hex(hash2);
    }
    catch (exception) {
    }
    try {
        document.getElementById("hash2").textContent = "Image 2: " + bin2hex(hash2);
    }
    catch (exception) {
    }

    try {
        compare()
    }
    catch (exception) {
    }
};

function scaleImage(theImage, width, height) {
    scaleCanvas = document.createElement("canvas");
    scaleSurface = scaleCanvas.getContext("2d");

    scaleCanvas.width = theImage.width;
    scaleCanvas.height = theImage.height;
    scaleSurface.drawImage(theImage, 0, 0, scaleCanvas.width, scaleCanvas.height);

    tmpScaleCanvas = document.createElement("canvas");
    tmpScaleSurface = tmpScaleCanvas.getContext("2d");

    while (scaleCanvas.width > width || scaleCanvas.height > height) {

        tmpScaleCanvas.width = ((scaleCanvas.width + width) / 2) | 0;
        tmpScaleCanvas.height = ((scaleCanvas.height + height) / 2) | 0;
        tmpScaleSurface.drawImage(scaleCanvas, 0, 0, tmpScaleCanvas.width, tmpScaleCanvas.height)

        scaleCanvas.width = tmpScaleCanvas.width;
        scaleCanvas.height = tmpScaleCanvas.height;
        scaleSurface.drawImage(tmpScaleCanvas, 0, 0, scaleCanvas.width, scaleCanvas.height)
    }

    return scaleCanvas;
}

function differenceHash(theImage) {
    hashImage = scaleImage(theImage, 8, 8);

    // Go through the image pixel by pixel.
    // Return 1-bits when a pixel is equal to or brighter than the previous
    // pixel, and 0-bits when it's below.
    try {
        pixels = hashImage.getContext("2d").getImageData(0, 0, 8, 8).data;
    } catch (exception) {
        window.alert(exception);
        return;
    }

    // Use the 64th pixel as the 0th pixel.
    previousPixel = toGreyScale(getPixel(pixels, 7, 7, 8));
    pixel = 0;

    differenceHashValue = "";

    for (var y = 0; y < 8; y++) {

        // Go left to right on odd rows.
        for (var x = 0; x < 8; x++) {
            pixel = toGreyScale(getPixel(pixels, x, y, 8));
            if (pixel >= previousPixel) {
                differenceHashValue += "1"
            } else {
                differenceHashValue += "0"
            }
            previousPixel = pixel
        }

        y++;

        // Go right to left on even rows.
        for (x = 7; x >= 0; x--) {
            pixel = toGreyScale(getPixel(pixels, x, y, 8));
            if (pixel >= previousPixel) {
                differenceHashValue += "1"
            } else {
                differenceHashValue += "0"
            }
            previousPixel = pixel
        }
    }

    return differenceHashValue;
}

function bin2hex(theBigInt) {
    high = theBigInt.substring(0, 32);
    low = theBigInt.substring(32, 64);
    high = parseInt(high, 2) >>> 0;
    low = parseInt(low, 2) >>> 0;
    high = high.toString(16);
    low = low.toString(16);
    while (high.length < 8) {
        high = "0" + high
    }
    while (low.length < 8) {
        low = "0" + low
    }
    return high + low
}

function getPixel(pixels, x, y, width) {
    return {
        red: pixels[(y * 4 * width) + (x * 4)],
        green: pixels[(y * 4 * width) + (x * 4) + 1],
        blue: pixels[(y * 4 * width) + (x * 4) + 2]
    }; // Alpha would probably be + 3
}

function toGreyScale(pixel) {
    return pixel['red'] * 0.3 + pixel['green'] * 0.59 + pixel['blue'] * 0.11
}

function xor(bigInt1, bigInt2) {
    while (bigInt1.length < bigInt2.length) {
        bigInt1 = "0" + bigInt1;
    }
    while (bigInt2.length < bigInt1.length) {
        bigInt2 = "0" + bigInt2;
    }

    onexortwo = "";
    for (var i = 0; i < bigInt1.length; i++) {
        if (bigInt1.charAt(i) == bigInt2.charAt(i)) {
            onexortwo += "0";
        } else {
            onexortwo += "1";
        }
    }

    return onexortwo;
}

function compare() {
    if (window.hash1 && window.hash2 && typeof hash1 != "undefined" && typeof hash2 != "undefined" && hash1 != null && hash2 != null && hash1 != "" && hash2 != "") {
        resultString = "";
        try {
            resultString = "Image 1 and image 2 are " + (64 - (xor(hash1, hash2).split("1").length - 1)) * 100.0 / 64.0 + "% similar."
        } catch (exception) {
            return
        }
        try {
            document.getElementById("comparison").innerText = resultString
        } catch (exception) {
        }
        try {
            document.getElementById("comparison").textContent = resultString
        } catch (exception) {
        }
    }
}

image1.src = 'image.php?url=' + encodeURIComponent(document.getElementById('remotefile1').value);
//image1.src=document.getElementById('remotefile1').value;
image2.src = 'image.php?url=' + encodeURIComponent(document.getElementById('remotefile2').value);
//image2.src=document.getElementById('remotefile2').value;
// -->