CPI.user.js

// ==UserScript==
// @name         comparepostimg
// @namespace    http://tampermonkey.net/
// @version      0.01
// @description  return if images are the same
// @author       fredgy-kun
// @match        https://danbooru.donmai.us/posts/*
// @grant        GM.xmlHttpRequest
// @connect      api.twitter.com
// @connect      pbs.twimg.com
// @connect      www.pixiv.net
// @connect      i.pximg.net
// ==/UserScript==

window.addEventListener("load", function(event) {
    document.body.innerHTML += `
<form>
A:<br>
<input id="ai" type="text" name="ainput" class="resize"  style="  width: 490px;" value="https://danbooru.donmai.us/data/__cala_viper_and_1_more_drawn_by_kimura_naoki__6f519731030e10801953c4639d2da302.jpg">
<br>
B:<br>
<input id="bi"  type="text" name="binput"      value="https://danbooru.donmai.us/data/__cala_viper_and_1_more_drawn_by_kimura_naoki__202f7311331e400d1fcbb33da77ec8e3.jpg" style="  width: 490px;">
<input id="bii" type="text" name="binputindex" value="0" style="  width: 20px;"><a id="compressed"></a>

</form>
<div id="status">UPDATE URLS AND CLICK</div>
<div id="errorid"></div>
<button id="butto" type="button" onclick="">Click Me!</button>
<br>
<img id="imga" src="" style=" max-height:900px; max-width: 600px;" >
<img id="imgb" src="" style=" max-height:900px; max-width: 600px;" >
<img id="difimg" src="" style=" max-height:900px; max-width: 600px;" >
`;


    var box = document.querySelector("#has-parent-relationship-preview") == null? document.querySelector("#has-children-relationship-preview") : document.querySelector("#has-parent-relationship-preview");

    document.getElementById('ai').value = document.getElementsByClassName("current-post")[0].dataset.fileUrl;

    document.getElementById('bi').value = box.querySelectorAll(".post-preview:not(.current-post)")[document.getElementById('bii').value].dataset.fileUrl;

    function getBase64Image(img) {
        var canvas = document.createElement('canvas');
        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;

        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);

        var dataURL = canvas.toDataURL('image/png',0);

        return dataURL.replace(/^data:image\/(png|jpg);base64,/, '');
    };

    function gibcanvas(img) {
        var canvas = document.createElement('canvas');
        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;

        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);

        return ctx;
    };

    function generateimgdiff(aimgData,bimgData,cavas,diff) {
        var cav = document.createElement('canvas')
        cav.setAttribute('width', cavas.naturalWidth);
        cav.setAttribute('height', cavas.naturalHeight);
        var ctx = cav.getContext('2d');
        var i;
        diff = Math.sqrt(diff);
        for (i = 0; i < aimgData.data.length / 4; i++) {
            aimgData.data[4 * i + 0] = Math.abs(aimgData.data[4 * i + 0] - bimgData.data[4 * i + 0])/diff;
            aimgData.data[4 * i + 1] = Math.abs(aimgData.data[4 * i + 1] - bimgData.data[4 * i + 1])/diff;
            aimgData.data[4 * i + 2] = Math.abs(aimgData.data[4 * i + 2] - bimgData.data[4 * i + 2])/diff;
        }
        ctx.putImageData(aimgData,0, 0)

        //.createImageData(100,100)
        return cav.toDataURL();;
    };

    function doit(a,b) {
         if (a.naturalWidth !== b.naturalWidth || a.naturalHeight != b.naturalHeight) {
            document.getElementById('status').innerHTML += 'NOT SAME LENGTH!';
            return;
        }
        console.log("started getting bases");
        var a_base64 = getBase64Image(a);
        var b_base64 = getBase64Image(b);
        console.log("finished getting bases");
        if (a_base64 === b_base64){document.getElementById('status').innerHTML = 'SAME!';
                                   return;}
        else{
            document.getElementById('status').innerHTML = 'NOT SAME!';
        }


        console.log("starting diff");
        var aimgData = gibcanvas(a).getImageData(0, 0, a.naturalWidth, a.naturalHeight);
        var bimgData = gibcanvas(b).getImageData(0, 0, a.naturalWidth, a.naturalHeight);

        var i,diff=0.000;
        for (i = 0; i < aimgData.data.length / 4; i++) {
            diff += Math.abs(aimgData.data[4 * i + 0] - bimgData.data[4 * i + 0]) / 255;
            diff += Math.abs(aimgData.data[4 * i + 1] - bimgData.data[4 * i + 1]) / 255;
            diff += Math.abs(aimgData.data[4 * i + 2] - bimgData.data[4 * i + 2]) / 255;
        }
        //--------------
       /* if (diff == 0){}
        else{
        }*/
        //------------
        diff/=aimgData.data.length;
        console.log(diff);
        document.getElementById('status').innerHTML += " "+ diff.toString();

        var c = document.getElementById('difimg');
        console.log("starting diff image");
        setTimeout(function(){// comment out
        c.src = generateimgdiff(aimgData,bimgData,a,diff);
        }, 100);// comment out
        console.log("ended diff image");

    }


    async function run(){
        document.getElementById('status').innerHTML = 'LOADING...';
        var a = document.getElementById('imga');
        var b = document.getElementById('imgb');
        a.setAttribute('crossorigin', 'anonymous');
        b.setAttribute('crossorigin', 'anonymous');
        
        a.onload = function() {
            document.getElementById('status').innerHTML = 'LOADED A... WAITING A';
            if(b.complete == true && b.naturalHeight > 0){doit(a,b)};
        };

        b.onload = function() {
            document.getElementById('status').innerHTML = 'LOADED B... WAITING B';
            if(a.complete == true && a.naturalHeight > 0){doit(a,b) };
        };


            a.src = document.getElementById('ai').value;
                  b.src = document.getElementById('bi').value;




    };

    run();
    document.getElementById("butto").addEventListener("click",run );

}
                       );