fixed

/*=============*\
|░ image thing ░|
\*=============*/
//html stuff
//paste box
var pasteImageHere=document.createElement("div");
pasteImageHere.style.width="3.25rem";
pasteImageHere.id="pasteImageHere";
pasteImageHere.contentEditable=true;
pasteImageHere.oninput=function(){
    var thing=this.getElementsByTagName("img")[0];
    if (thing) loadImage(thing.src);
    while (this.firstChild) this.removeChild(this.lastChild); //delete everything
};
document.querySelector("#sendpane").appendChild(pasteImageHere);

var sidePane=document.querySelector("#sidepane")
//file upload button
var fileBrowse=document.createElement("input");
fileBrowse.type="file";
fileBrowse.id="imageUpload";
fileBrowse.onchange=function(){
    console.log("User uploaded an image...");
    var reader=new FileReader();
    reader.readAsDataURL(this.files[0]);
    reader.onload=function(){loadImage(this.result)};
};
sidePane.appendChild(fileBrowse);
//dither slider
var ditherSlider=document.createElement("input");
ditherSlider.id="ditherSlider";
ditherSlider.type="range";
ditherSlider.min="0";
ditherSlider.max="100";
ditherSlider.onchange=function(){
    dither=this.value/100;
    updateImage();
};
sidePane.appendChild(ditherSlider);
//blurring checkbox
var blurring=document.createElement("input");
blurring.id="blurring";
blurring.type="checkbox";
blurring.checked=true;
blurring.onchange=function(){updateImage()};
sidePane.appendChild(blurring);
//fuck
var elemX = 0;
var elemY = 0;
var offsetX, offsetY;
var moving = 0;
var scale = 0.5;

var moveBoxParent=document.createElement("div");
moveBoxParent.style.width="200px";
moveBoxParent.style.height="100px";
moveBoxParent.style.backgroundSize="contain";
moveBoxParent.style.backgroundRepeat="no-repeat";
moveBoxParent.style.backgroundColor="white";
moveBoxParent.onmousemove=function(e){
    if (moving){
        elemX=Math.min(Math.max(e.pageX-offsetX,0),(1-scale)*200);
        elemY=Math.min(Math.max(e.pageY-offsetY,0),(1-scale)*100);
        moveBox.style.left=elemX+"px";
        moveBox.style.top=elemY+"px";
        updateImageFast();
    }
};
moveBoxParent.onmouseup = function(){
    moving = 0;
    updateImage();
};
sidepane.appendChild(moveBoxParent);

var moveBox=document.createElement("div");
moveBox.style.backgroundColor="rgba(128,128,128,0.5)";
moveBox.style.position="relative";
moveBox.style.border="1px solid red";
moveBox.style.width="200px";
moveBox.style.height="100px";
//moveBox.style.margin=-scale*100+"px "+-scale*50+"px";
moveBox.onmousedown=function(e){
   moving=1;
   offsetX=e.pageX-elemX;
   offsetY=e.pageY-elemY;
};
moveBoxParent.appendChild(moveBox);

var scaleSlider=document.createElement("input");
scaleSlider.type="range";
scaleSlider.min=0;
scaleSlider.max=1;
scaleSlider.step=0.001;
scaleSlider.oninput=function() {
   scale=this.value;
   moveBox.style.width=scale*200+"px";
   moveBox.style.height=scale*100+"px";
   updateImageFast();
};
scaleSlider.onchange=function(){updateImage()};
sidepane.appendChild(scaleSlider);
//variables
var z=new Image(); //best variable name (c) Trinitro 2016
var dither=0.75,noise=0;
var didStuff=false;
var isImage=false;
//more functions
function loadImage(source){
    console.log("Found an image. (assume load failed)");
    z=new Image();
    z.crossOrigin="Anonymous";
    z.onload=function(){
        console.log("Image loaded successfully!");
        moveBoxParent.style.backgroundImage="url('"+source+"')";
        isImage=true;
        updateImage();
    };
    z.src=source;
}
function updateImage(){if (isImage) putImage(z)}
function updateImageFast(){var oldDither=dither;dither=0;updateImage();dither=oldDither;}
//put image on canvas, and convert to 4 colors.
function putImage(img){
    if (!didStuff) { //do these the first time only (put them here so they don't happen before the page loads)
        colorButtons=document.querySelectorAll("#chatdraw button-area button.colorChange");
        paletteSize=colorButtons.length;
        document.getElementById("colorPicker").addEventListener("change",()=>{updateImage()});
        document.querySelector("#chatdraw button-area button").addEventListener("click",()=>{
            isImage=false;
            moveBoxParent.style.backgroundImage="";
        });//✖ button
        canvas=document.querySelector("#chatdraw canvas");
        c2d=canvas.getContext("2d");
        cW=canvas.width,cH=canvas.height;
        didStuff=true;
    }
    const R=0,G=1,B=2;
    var i,palette=[];
    for(i=0;i<paletteSize;i++) palette.push(fillStyleToRgb(colorButtons[i].style.color));
    c2d.rect(0,0,cW,cH);c2d.fillStyle="white";c2d.fill(); //clear canvas
    c2d.webkitImageSmoothingEnabled=c2d.mozImageSmoothingEnabled=c2d.imageSmoothingEnabled=blurring.checked;
    scale0=Math.min(canvas.width/img.width,canvas.height/img.height);
    c2d.drawImage(img,elemX,elemY,scale*200/scale0,scale*100/scale0,0,0,200,100);
    var data=c2d.getImageData(0,0,cW,cH);
    for(var x=0,bestIndex;x<cW*cH*4;x+=4){
        if (noise) for (i=0;i<3;i++) data.data[x+i]+=Math.random()*noise-noise/2;
        //find the best color
        var bestDist=Infinity;
        for (i=0;i<paletteSize&&bestDist!==0;i++) {
            for (var j=0,dist=0,color=palette[i];j<3;j++) dist+=Math.abs(data.data[x+j]-color[j]);
            if (dist<bestDist){bestDist=dist;bestIndex=i}
        }
        //dithering
        if (dither){
            for (i=0;i<3;i++) {
                var err=(data.data[x+i]-palette[bestIndex][i])*dither/3;
                data.data[x+i]=palette[bestIndex][i];
                data.data[x     +4+i]+=err;   // right
                data.data[x+cW*4-4+i]+=err/2; // bottom left
                data.data[x+cW*4  +i]+=err;   // bottom
                data.data[x+cW*4+4+i]+=err/2; // bottom right
            }
        } else for (i=0;i<3;i++) data.data[x+i]=palette[bestIndex][i];
    }
    c2d.putImageData(data,0,0);
    console.log("Image conversion sucessful.");
}
//adjust noise amount
commands.push(new Command("noise", function(param){
    if (param.length>1) {
        noise=parseFloat(param,10);
        systemMessage("Noise amount set to "+noise+".");
        updateImage();
    } else systemMessage("Noise amount is "+noise+".");
}));