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","");
- 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 names (c) Trinitro 2016
- //get image from input
- function checkInput(){
- var thing=pasteImageHere.getElementsByTagName("img")[0];
- if (thing){
- console.log("Found an image. (assume load failed)");
- z.crossOrigin="Anonymous";
- z.onload=function(){
- console.log("Image loaded successfully!");
- putImage(z);
- };
- 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=cR*cR+cG*cG+cB*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;}
- }
- //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*4/12); // right
- addRGB(x+796,dither*2/12); // down
- addRGB(x+800,dither*4/12); // down/left
- addRGB(x+804,dither*2/12); // 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);
- console.log("Image conversion sucessful.");
- //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<=100&&newDither>=0) {
- dither=newDither/100;
- systemMessage("Dither amount set to "+(dither*100)+"%.");
- putImage(z);
- } else {
- warningMessage("Dither amount must be between 0 and 100 (default is 75)"); //boring
- }
- } else {
- systemMessage("Dither amount is "+(dither*100)+"%.");
- }
- }));
- //adjust noise amount
- var noise=36;
- 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+".");
- }
- }));
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement