Advertisement
12Me21

version 5.1.2: changelog: no changes probablyyyyyyyyyyyyyyy

Jul 29th, 2016
366
0
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. pasteImageHere.oninput=function(){checkInput();}; //no more slow intervals! :D
  10. document.querySelector("#sendpane").appendChild(pasteImageHere);
  11. //file upload button
  12. var fileBrowse=document.createElement("input");
  13. fileBrowse.type="file";
  14. fileBrowse.id="imageUpload";
  15. fileBrowse.onchange=function(){loadImg();};
  16. document.querySelector("#sidepane").appendChild(fileBrowse);
  17. var z=new Image(); //best variable names (c) Trinitro 2016
  18. //get image from input
  19. function checkInput(){
  20.     var thing=pasteImageHere.getElementsByTagName("img")[0];
  21.     if (thing){
  22.         console.log("Found an image. (assume load failed)");
  23.         z.crossOrigin="Anonymous";
  24.         z.onload=function(){
  25.             console.log("Image loaded successfully!");
  26.             putImage(z);
  27.         };
  28.         z.src=thing.src;
  29.     }
  30.     pasteImageHere.innerHTML="";
  31. }
  32. //load image from file browse button thing
  33. function loadImg(){
  34.     var reader=new FileReader();
  35.     reader.readAsDataURL(fileBrowse.files[0]);
  36.     reader.onload=function(){
  37.         z.onload=function(){putImage(z);};
  38.         z.src=reader.result;
  39.     };
  40. }
  41. //put image on canvas, and convert to 4 colors.
  42. function putImage(img){
  43.     var palette=[];
  44.     for(var i=0;i<4;i++) //get colors
  45.         palette.push(fillStyleToRgb(document.querySelectorAll("#chatdraw button-area button.colorChange")[i].style.color));
  46.     var canvas=document.querySelector("#chatdraw canvas");
  47.     var c2d=canvas.getContext("2d");
  48.     var scale=Math.min(canvas.width/img.width,canvas.height/img.height);
  49.     c2d.drawImage(img,0,0,img.width*scale,img.height*scale);
  50.     var data=c2d.getImageData(0,0,canvas.width,canvas.height);
  51.     var bestIndex=null;
  52.     for(var x=0;x<data.data.length;x+=4){
  53.         //find the best color
  54.         var bestDist=null;
  55.         if (noise){
  56.             data.data[x  ]+=Math.random()*noise-noise/2;
  57.             data.data[x+1]+=Math.random()*noise-noise/2;
  58.             data.data[x+2]+=Math.random()*noise-noise/2;
  59.         }
  60.         for(var i=0;i<palette.length&&bestDist!==0;i++){
  61.             var uR= data.data[x  ]+palette[i][0]; //red sum
  62.             var cR=-data.data[x  ]+palette[i][0]; //red difference
  63.             var cG=-data.data[x+1]+palette[i][1]; //green difference
  64.             var cB=-data.data[x+2]+palette[i][2]; //blue difference
  65.             var dist=cR*cR+cG*cG+cB*cB;
  66.             //var dist=(2+uR/512)*cR*cR+4*cG*cG+(2+(510-uR)/512)*cB*cB;
  67.             if(bestDist===null||dist<bestDist){bestDist=dist;bestIndex=i;}
  68.         }
  69.         //dithering
  70.         var errr=(data.data[x  ]-palette[bestIndex][0]);
  71.         var errg=(data.data[x+1]-palette[bestIndex][1]);
  72.         var errb=(data.data[x+2]-palette[bestIndex][2]);
  73.         addRGB(x+4  ,dither*4/12); // right
  74.         addRGB(x+796,dither*2/12); // down
  75.         addRGB(x+800,dither*4/12); // down/left
  76.         addRGB(x+804,dither*2/12); // down/right
  77.         data.data[x  ]=palette[bestIndex][0];
  78.         data.data[x+1]=palette[bestIndex][1];
  79.         data.data[x+2]=palette[bestIndex][2];
  80.     }
  81.     c2d.putImageData(data,0,0);
  82.     console.log("Image conversion sucessful.");
  83.     //this is bad
  84.     function addRGB(index,amount) {
  85.         if (index<data.data.length) {
  86.             data.data[index  ]+=errr*amount;
  87.             data.data[index+1]+=errg*amount;
  88.             data.data[index+2]+=errb*amount;
  89.         }
  90.     }
  91. }
  92. //adjust dither amount
  93. var dither=0.75;
  94. commands.push(new Command("dither", function(param){
  95.     if (param.length>1) {  
  96.         var newDither=parseFloat(param,10);
  97.         if (newDither<=100&&newDither>=0) {
  98.             dither=newDither/100;
  99.             systemMessage("Dither amount set to "+(dither*100)+"%.");
  100.             putImage(z);
  101.         } else {
  102.             warningMessage("Dither amount must be between 0 and 100 (default is 75)"); //boring
  103.         }
  104.     } else {
  105.         systemMessage("Dither amount is "+(dither*100)+"%.");
  106.     }
  107. }));
  108. //adjust noise amount
  109. var noise=36;
  110. commands.push(new Command("noise", function(param){
  111.     if (param.length>1) {  
  112.         noise=parseFloat(param,10);
  113.         systemMessage("Noise amount set to "+noise+".");
  114.         putImage(z);
  115.     } else {
  116.         systemMessage("Noise amount is "+noise+".");
  117.     }
  118. }));
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement