Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*=============*\
- |░ image thing ░|
- \*=============*/
- //paste box
- var pasteImageHere=document.createElement("div");
- pasteImageHere.style.width="3.25rem";
- pasteImageHere.id="pasteImageHere";
- pasteImageHere.setAttribute("contenteditable","");
- 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);
- //THE ONLY SOLUTION
- var imgInt=setInterval(function(){checkInput();},1000);
- var dither=0.5;
- //get image from input
- function checkInput(){
- var thing=document.getElementById("pasteImageHere").firstChild;
- if (thing){
- if (thing.tagName=="IMG") {
- var pastedImage=new Image();
- pastedImage.crossOrigin="Anonymous";
- pastedImage.onload=function(){putImage(pastedImage);};
- pastedImage.src=thing.src;
- }
- }
- document.getElementById("pasteImageHere").innerHTML="";
- }
- //load image from file browse button thing
- function loadImg(){
- var z=new Image(); //best variable names (c) Trinitro 2016
- var reader=new FileReader();
- reader.readAsDataURL(document.getElementById("imageUpload").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=[];
- var i;
- for(i=0;i<4;i++)
- 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,img.height,0,0,img.width*scale,img.height*scale);
- var data=c2d.getImageData(0,0,canvas.width,canvas.height);
- //var offMessage=onMessage;
- //window.onMessage=function(){setTimeout(window.onMessage=offMessage,100);};
- //sendMessage("/coingive #286 1");
- for(var x=0;x<data.data.length;x+=4){
- //very simple palettization (works better with dithering)
- var bestDist=null;
- var bestIndex=null;
- for(i=0;i<palette.length;i++){
- var uR=data.data[x]+palette[i][0];
- var cR=-data.data[x ]+palette[i][0];
- var cG=-data.data[x+1]+palette[i][1];
- var cB=-data.data[x+2]+palette[i][2];
- //var dist=Math.abs(cR)+Math.abs(cG)+Math.abs(cB);
- 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;}
- if(bestDist===0) break; //perfect match, should speed up images with white backgrounds, for example
- }
- //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.2357); // right
- addRGB(x+796,dither*0.1961); // down
- addRGB(x+800,dither*0.7070); // down/left
- addRGB(x+804,dither*0.3162); // 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 probably 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;
- }
- }
- //Hopefully the palette selection is improved someday...
- function getButtonColors() {
- var colors=[];
- for(var i=0;i<4;i++)
- colors.push(fillStyleToRgb(document.querySelectorAll("#chatdraw button-area button.colorChange").style.color));
- return colors;
- }
- }
- //adjust dither amount
- commands.push(new Command("dither", function(param){ //input a decimal between 0 and 1 (I reccommend 0.5)
- var newDither=parseFloat(param,10);
- if (param.length>1) {
- if (newDither<=1&&newDither>=0) {
- dither=newDither;
- systemMessage("Dither amount set to "+(dither*100)+"%");
- } else {
- warningMessage("Dither amount must be between 0 and 1 (default is 0.5)"); //boring
- }
- } else {
- dither=0.5;
- systemMessage("Dither amount reset to default (50%)");
- }
- }));
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement