image code

/*=============*\
|░ image thing ░|
\*=============*/
//paste box
var pasteImageHere=document.createElement("div");
pasteImageHere.style.width="3.25rem";
pasteImageHere.id="pasteImageHere";
pasteImageHere.setAttribute("contenteditable","");
pasteImageHere.oninput=function(){checkInput();}; //no more slow intervals! :D
document.querySelector("#sendpane").appendChild(pasteImageHere);
//file upload button
var fileBrowse=document.createElement("input");
fileBrowse.type="file";
fileBrowse.id="imageUpload";
fileBrowse.onchange=function(){loadImg();};
document.querySelector("#sidepane").appendChild(fileBrowse);
var z=new Image(); //best variable name (c) Trinitro 2016
//get image from input
function checkInput(){
    var thing=pasteImageHere.firstChild;
    if (thing){
    //Console.log("Found a thing in the input box...");
        if (thing.tagName=="IMG") {
            console.log("Found an image. (assume load failed)");
            z.crossOrigin="Anonymous";
            z.onload=function(){
                console.log("Image loaded successfully!");
                putImage(z);
                //console.log("Image conversion sucessful.");
            };
            z.src=thing.src;
        }
    }
    pasteImageHere.innerHTML="";
}
//load image from file browse button thing
function loadImg(){
    var reader=new FileReader();
    reader.readAsDataURL(fileBrowse.files[0]);
    reader.onload=function(){
        z.onload=function(){putImage(z);};
        z.src=reader.result;
    };
}
//put image on canvas, and convert to 4 colors.
function putImage(img){
    var palette=[];
    for(var i=0;i<4;i++) //get colors
        palette.push(fillStyleToRgb(document.querySelectorAll("#chatdraw button-area button.colorChange")[i].style.color));
    var canvas=document.querySelector("#chatdraw canvas");
    var c2d=canvas.getContext("2d");
    var scale=Math.min(canvas.width/img.width,canvas.height/img.height);
    c2d.drawImage(img,0,0,img.width*scale,img.height*scale);
    var data=c2d.getImageData(0,0,canvas.width,canvas.height);
    var bestIndex=null;
    for(var x=0;x<data.data.length;x+=4){
        //find the best color
        var bestDist=null;
        if (noise){
            data.data[x  ]+=Math.random()*noise-noise/2;
            data.data[x+1]+=Math.random()*noise-noise/2;
            data.data[x+2]+=Math.random()*noise-noise/2;
        }
        for(var i=0;i<palette.length&&bestDist!==0;i++){
            var uR= data.data[x  ]+palette[i][0]; //red sum
            var cR=-data.data[x  ]+palette[i][0]; //red difference
            var cG=-data.data[x+1]+palette[i][1]; //green difference
            var cB=-data.data[x+2]+palette[i][2]; //blue difference
            var dist=(2+uR/512)*cR*cR+4*cG*cG+(2+(510-uR)/512)*cB*cB;
            if(bestDist===null||dist<bestDist){bestDist=dist;bestIndex=i;}
        }
        //dithering
        var errr=(data.data[x  ]-palette[bestIndex][0]);
        var errg=(data.data[x+1]-palette[bestIndex][1]);
        var errb=(data.data[x+2]-palette[bestIndex][2]);
        addRGB(x+4  ,dither*0.1620); // right
        addRGB(x+796,dither*0.1348); // down
        addRGB(x+800,dither*0.4859); // down/left
        addRGB(x+804,dither*0.2173); // down/right
        data.data[x  ]=palette[bestIndex][0];
        data.data[x+1]=palette[bestIndex][1];
        data.data[x+2]=palette[bestIndex][2];
    }
    c2d.putImageData(data,0,0);
    //this is bad
    function addRGB(index,amount) {
        if (index<data.data.length) {
            data.data[index  ]+=errr*amount;
            data.data[index+1]+=errg*amount;
            data.data[index+2]+=errb*amount;
        }
    }
}
//adjust dither amount
var dither=0.75;
commands.push(new Command("dither", function(param){
    if (param.length>1) {
        var newDither=parseFloat(param,10);
        if (newDither<=1&&newDither>=0) {
            dither=newDither;
            systemMessage("Dither amount set to "+(dither*100)+"%.");
            putImage(z);
        } else {
            warningMessage("Dither amount must be between 0 and 1. (default is 0.75)"); //boring
        }
    } else {
        systemMessage("Dither amount is "+(dither*100)+"%.");
    }
}));
//adjust noise amount
var noise=0;
commands.push(new Command("noise", function(param){
    if (param.length>1) {
        noise=parseFloat(param,10);
        systemMessage("Noise amount set to "+noise+".");
        putImage(z);
    } else {
        systemMessage("Noise amount is "+noise+".");
    }
}));