Skip to content

Instantly share code, notes, and snippets.

@fredgido

fredgido/compareimg.js

Last active December 27, 2019 02:33
Show Gist options
  • Save fredgido/d59ccf0984c47f7ae5a7170074c41c34 to your computer and use it in GitHub Desktop.
Save fredgido/d59ccf0984c47f7ae5a7170074c41c34 to your computer and use it in GitHub Desktop.
Download ZIP
compareimg
Raw
compareimg.js
// ==UserScript==
// @name compareimg
// @namespace http://tampermonkey.net/
// @version 0.5
// @description return if images are the same
// @author fredgy-kun
// @match https://danbooru.donmai.us/static/site_map
// @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>
Pixiv link, image 0 to n:<br>
<input id="px" type="text" name="pixiv" class="resize" style=" width: 490px;" value="https://www.pixiv.net/artworks/72266040">
<input id="pxp" type="text" name="pixiv_page" class="dsize" style=" width: 20px;" value="0">
<br>
Twitter link ,image 0 to 3:<br>
<input id="tw" type="text" name="twitter" value="https://twitter.com/i/web/status/1077044925047267330" style=" width: 490px;">
<input id="twp" type="text" name="twitter_page" value="0" style=" width: 20px;"><a id="compressed"></a>
</form>
<div id="status">PASTE URLS AND CLICK</div>
<div id="errorid"></div>
<button id="butto" type="button" onclick="">Click Me!</button>
<br>
<img id="pixivimg" src="" style=" max-height:200px; max-width: 200px;" >
<img id="twitterimg" src="" style=" max-height:200px; max-width: 200px;" >
<img id="difimg" src="" style=" max-height:200px; max-width: 200px;" >
`;
function getbinarray(urllink) {
let iso_8859_15_table = { 338: 188, 339: 189, 352: 166, 353: 168, 376: 190, 381: 180, 382: 184, 8364: 164 }
function iso_8859_15_to_uint8array(iso_8859_15_str) {
let buf = new ArrayBuffer(iso_8859_15_str.length);
let bufView = new Uint8Array(buf);
for (let i = 0, strLen = iso_8859_15_str.length; i < strLen; i++) {
let octet = iso_8859_15_str.charCodeAt(i);
if (iso_8859_15_table.hasOwnProperty(octet))
octet = iso_8859_15_table[octet]
bufView[i] = octet;
if(octet < 0 || 255 < octet)
console.error(`invalid data error`)
}
return bufView
}
GM.xmlHttpRequest({
method: "GET",
responseType: "arraybuffer",
url: urllink ,
headers : { 'range': 'bytes=0-250'},
onload: function(response) {
console.log(`Uint8Array : `)
var uint8array = iso_8859_15_to_uint8array(response.responseText)
console.log(uint8array)
var hexstr = Array.prototype.map.call(uint8array, x => ('00' + x.toString(16)).slice(-2)).join('');
console.log( hexstr);
if ( hexstr.indexOf("ffdb") == 40 ){
document.getElementById('compressed').innerHTML ="is compressed "
if ( hexstr.indexOf("ffdb",hexstr.indexOf("ffdb")+1) != 178 ){
document.getElementById('compressed').innerHTML += "or not "
}
if (parseInt(hexstr.charAt(hexstr.indexOf("ffdb")+10 )+hexstr.charAt(hexstr.indexOf("ffdb")+10+1 ), 16) >2 &&
parseInt(hexstr.charAt(hexstr.indexOf("ffdb")+10 )+hexstr.charAt(hexstr.indexOf("ffdb")+10+1 ), 16) <8 &&
parseInt(hexstr.charAt(hexstr.indexOf("ffdb")+136)+hexstr.charAt(hexstr.indexOf("ffdb")+136+1), 16) >28){
} else{
document.getElementById('compressed').innerHTML ="is not compressed but has same offset"}
} else {
if (parseInt(hexstr.charAt(hexstr.indexOf("ffdb")+10 )+hexstr.charAt(hexstr.indexOf("ffdb")+10+1 ), 16) >2 &&
parseInt(hexstr.charAt(hexstr.indexOf("ffdb")+10 )+hexstr.charAt(hexstr.indexOf("ffdb")+10+1 ), 16) <8 &&
parseInt(hexstr.charAt(hexstr.indexOf("ffdb")+136)+hexstr.charAt(hexstr.indexOf("ffdb")+136+1), 16) >28){
document.getElementById('compressed').innerHTML ="looks compressed, check by hand (png?) "
} else{
document.getElementById('compressed').innerHTML ="is not compressed "}
}
}
});
return "done compression check"}
function ilustid(str) {
if( Number.isInteger(parseInt(str.split("/artworks/")[1]))){
return str.split("/artworks/")[1];}
else{document.getElementById('errorid').innerHTML += 'ERROR ON PIXIVID! ';}
}
function pixivpage(str) {
if( Number.isInteger(parseInt(str))){
return str;}
else{document.getElementById('errorid').innerHTML += 'ERROR ON PIXIV PAGE! ';}
}
function twitterpage(str,arr) {
if( Number.isInteger(parseInt(str)) && parseInt(str) < arr.length ){
return str;}
else{document.getElementById('errorid').innerHTML += 'ERROR ON TWITTER PAGE! ';}
}
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");
}
function run(){
document.getElementById('status').innerHTML = 'LOADING...';
var a = document.getElementById('pixivimg');
var b = document.getElementById('twitterimg');
a.setAttribute('crossorigin', 'anonymous');
b.setAttribute('crossorigin', 'anonymous');
a.onload = function() {
document.getElementById('status').innerHTML = 'LOADED PIXIV... WAITING TWITTER';
if(b.complete == true && b.naturalHeight > 0){doit(a,b)};
};
b.onload = function() {
document.getElementById('status').innerHTML = 'LOADED TWITTER... WAITING PIXIV';
if(a.complete == true && a.naturalHeight > 0){doit(a,b) };
};
if (document.getElementById('px').value.match(/^https\:\/\/www\.pixiv\.net\/.*$/)) {
GM.xmlHttpRequest({
method: "GET",
url: "https://www.pixiv.net/ajax/illust/"+ilustid(document.getElementById('px').value),
onload: function(response) {
a.src = 'https://danbooru.donmai.us/uploads/image_proxy?url=' +JSON.parse(response.responseText).body.urls.original.replace("_p0.","_p"+pixivpage(document.getElementById('pxp').value+"."));
console.log("source for pixiv was set "+ JSON.parse(response.responseText).body.urls.original);
}
});
}else if (document.getElementById('px').value.match(/^https\:\/\/i\.pximg\.net\/.*$/)) {
a.src = 'https://danbooru.donmai.us/uploads/image_proxy?url=' + document.getElementById('px').value;
} else {
a.src = document.getElementById('px').value;
document.getElementById('errorid').innerHTML = 'ERROR ON PIXIV URL!';
}
if (document.getElementById('tw').value.match(/^https\:\/\/twitter\.com\/.*$/)) {
console.log("https://api.twitter.com/1.1/statuses/show.json?id="+document.getElementById('tw').value.split("/")[document.getElementById('tw').value.split("/").length-1] +"&tweet_mode=extended&trim_user=true");
GM.xmlHttpRequest({
anonymous: true,
method: "GET",
url: "https://api.twitter.com/1.1/statuses/show.json?id="+document.getElementById('tw').value.split("/")[document.getElementById('tw').value.split("/").length-1] +"&tweet_mode=extended&trim_user=true",
headers : { 'authorization': 'Bearer AAAAAAAAAAAAAAAAAAAAANRILgAAAAAAnNwIzUejRCOuH5E6I8xnZz4puTs%3D1Zv7ttfk8LF81IUq16cHjhLTvJu4FA33AGWWjCpTnA'/*,'cookie':' '*/},
onload: function(response) {
b.src = JSON.parse(response.responseText).extended_entities.media[twitterpage(document.getElementById('twp').value,JSON.parse(response.responseText).extended_entities.media)].media_url+":orig";
console.log("source for twitter was set ");
console.log(JSON.parse(response.responseText).extended_entities.media[twitterpage(document.getElementById('twp').value,JSON.parse(response.responseText).extended_entities.media)].media_url+":orig");
console.log(getbinarray(b.src));
}
});
}else if (document.getElementById('tw').value.match(/^https\:\/\/pbs\.twimg\.com\/.*$/)) {
b.src = document.getElementById('tw').value;
console.log(getbinarray(b.src));
document.getElementById('errorid').innerHTML = 'DIRECT TWITTER URL! ';
}
else {
b.src = document.getElementById('tw').value;
console.log(getbinarray(b.src));
document.getElementById('errorid').innerHTML = 'ERROR ON TWITTER URL! ';}
};
document.getElementById("butto").addEventListener("click",run );
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment