ok

/*=============*\
|░ 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 pictureDrawing=true;//(should be set to false when X is clicked)
///////////////////////////////////
var z=new Image(); //best variable names (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);
	pictureDrawing=true;
	//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;
		}
	}
}
////////////////////////////////////
function updateImage(){ //run this also when change palette plz
	if (pictureDrawing)
		putImage(z);
}
///////////////////////////////////
//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)+"%.");
			updateImage();
		} 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+".");
		updateImage();
	} else {
		systemMessage("Noise amount is "+noise+".");
	}
}));