Advertisement
12Me21

Unfinished Finished thing

Jul 19th, 2016
1,304
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*=============*\
  2. |░ image thing ░|
  3. \*=============*/
  4. //paste box
  5. var pasteImageHere=document.createElement("div");
  6. pasteImageHere.style.width="3.25rem";
  7. pasteImageHere.id="pasteImageHere";
  8. pasteImageHere.setAttribute("contenteditable","");
  9. document.querySelector("#sendpane").appendChild(pasteImageHere);
  10. //file upload button
  11. var fileBrowse=document.createElement("input");
  12. fileBrowse.type="file";
  13. fileBrowse.id="imageUpload";
  14. fileBrowse.onchange=function(){loadImg();};
  15. document.querySelector("#sidepane").appendChild(fileBrowse);
  16. //THE ONLY SOLUTION
  17. var imgInt=setInterval(function(){checkInput();},1000);
  18. var dither=0.5;
  19.  
  20. //get image from input
  21. function checkInput(){
  22.     var thing=document.getElementById("pasteImageHere").firstChild;
  23.     if (thing){
  24.         if (thing.tagName=="IMG") {
  25.             var pastedImage=new Image();
  26.             pastedImage.crossOrigin="Anonymous";
  27.             pastedImage.onload=function(){putImage(pastedImage);};
  28.             pastedImage.src=thing.src;
  29.         }
  30.     }
  31.     document.getElementById("pasteImageHere").innerHTML="";
  32. }
  33. //load image from file browse button thing
  34. function loadImg(){
  35.     var z=new Image(); //best variable names (c) Trinitro 2016
  36.     var reader=new FileReader();
  37.     reader.readAsDataURL(document.getElementById("imageUpload").files[0]);
  38.     reader.onload=function(){
  39.         z.onload=function(){putImage(z);};
  40.         z.src=reader.result;
  41.     };
  42. }
  43. //put image on canvas, and convert to 4 colors.
  44. function putImage(img){
  45.     var palette=[];
  46.     var i;
  47.     for(i=0;i<4;i++)
  48.         palette.push(fillStyleToRgb(document.querySelectorAll("#chatdraw button-area button.colorChange")[i].style.color));
  49.     var canvas=document.querySelector("#chatdraw canvas");
  50.     var c2d=canvas.getContext("2d");
  51.     var scale=Math.min(canvas.width/img.width,canvas.height/img.height);
  52.     c2d.drawImage(img,0,0,img.width,img.height,0,0,img.width*scale,img.height*scale);
  53.     var data=c2d.getImageData(0,0,canvas.width,canvas.height);
  54.     for(var x=0;x<data.data.length;x+=4){
  55.         //very simple palettization (works better with dithering)
  56.         var bestDist=null;
  57.         var bestIndex=null;
  58.         for(i=0;i<palette.length;i++){
  59.             var cR=-data.data[x  ]+palette[i][0];
  60.             var cG=-data.data[x+1]+palette[i][1];
  61.             var cB=-data.data[x+2]+palette[i][2];
  62.             var dist=Math.abs(cR)+Math.abs(cG)+Math.abs(cB);
  63.             if(bestDist===null||dist<bestDist){bestDist=dist;bestIndex=i;}
  64.             if(bestDist===0) break; //perfect match, should speed up images with white backgrounds, for example
  65.         }
  66.         //dithering
  67.         var errr=(data.data[x  ]-palette[bestIndex][0]);
  68.         var errg=(data.data[x+1]-palette[bestIndex][1]);
  69.         var errb=(data.data[x+2]-palette[bestIndex][2]);
  70.         addRGB(x+4  ,dither*0.2357); // right
  71.         addRGB(x+796,dither*0.1961); // down
  72.         addRGB(x+800,dither*0.7070); // down/left
  73.         addRGB(x+804,dither*0.3162); // down/right
  74.         data.data[x  ]=palette[bestIndex][0];
  75.         data.data[x+1]=palette[bestIndex][1];
  76.         data.data[x+2]=palette[bestIndex][2];
  77.     }
  78.     c2d.putImageData(data,0,0);
  79.     //this is probably bad
  80.     function addRGB(index,amount) {
  81.         if (index<data.data.length) {
  82.             data.data[index  ]+=errr*amount;
  83.             data.data[index+1]+=errg*amount;
  84.             data.data[index+2]+=errb*amount;
  85.         }
  86.     }
  87.     //Hopefully the palette selection is improved someday...
  88.     function getButtonColors() {
  89.         var colors=[];
  90.         for(var i=0;i<4;i++)
  91.             colors.push(fillStyleToRgb(document.querySelectorAll("#chatdraw button-area button.colorChange").style.color));
  92.         return colors;
  93.     }
  94. }
  95. //adjust dither amount
  96. commands.push(new Command("dither", function(param){ //input a decimal between 0 and 1 (I reccommend 0.5)
  97.     var newDither=parseFloat(param,10);
  98.     if (param.length>1) {  
  99.         if (newDither<=1&&newDither>=0) {
  100.             dither=newDither;
  101.             systemMessage("Dither amount set to "+(dither*100)+"%");
  102.         } else {
  103.             warningMessage("Dither amount must be between 0 and 1 (default is 0.5)"); //boring
  104.         }
  105.     } else {
  106.         dither=0.5;
  107.         systemMessage("Dither amount reset to default (50%)");
  108.     }
  109. }));
Advertisement
RAW Paste Data Copied
Advertisement