☰

pixely.cf tools

Allows you to draw images by uploading and then clicking. MAKE SURE YOUR IMAGES ARE LESS THAN 100x100px

当前为 2020-04-25 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         pixely.cf tools
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.7
  5. // @description  Allows you to draw images by uploading and then clicking. MAKE SURE YOUR IMAGES ARE LESS THAN 100x100px
  6. // @author       theusaf
  7. // @match        http://pixely.cf/
  8. // @match        http://qwertyquerty.cf/
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. var drawScale = 10;
  13. window.finalInfo = [];
  14. window.sketchint = 0;
  15. window.isPlacingImage = false;
  16. var di = document.createElement('div'); //div
  17. di.style.background = 'white';
  18. di.style.display = 'none';
  19. di.style.top = "0px";
  20. di.style.position = "fixed";
  21. var im = new Image(); //image
  22. im.crossOrigin = "Anonymous";
  23. var ca = document.createElement('canvas'); //canvas
  24. ca.style.display = 'none';
  25. var fi = document.createElement('input'); //file input
  26. fi.type = 'file';
  27. di.style.float = 'left';
  28. var ct = ca.getContext('2d'); //context
  29.  
  30. document.body.addEventListener('keydown',toggleFile);
  31.  
  32. function toggleFile(evt){
  33.     if(evt.keyCode == 16){
  34.         evt.preventDefault();
  35.         di.style.display = di.style.display == "block" ? "none" : "block";
  36.     }
  37. }
  38.  
  39. fi.onchange = function(e){
  40.     if(!e){
  41.         return;
  42.     }
  43.     var reader = new FileReader();
  44.     reader.onload = function(e){
  45.         im.src = e.target.result;
  46.     }
  47.     reader.readAsDataURL(e.target.files[0]);
  48. }
  49.  
  50. const int = document.createElement("input");
  51. int.type = "number";
  52. int.placeholder = "Max size";
  53. int.min = 1;
  54. int.max = 100;
  55. int.step = 1;
  56. int.value = 100;
  57.  
  58. im.onload = function(){
  59.     const max = Number(int.value);
  60.     console.log('loaded');
  61.     if(im.src.length > 0){
  62.         //change canvas width and height.
  63.         ca.width = im.width;
  64.         ca.height = im.height;
  65.         if(im.width <= max && im.height <= max){
  66.           ct.drawImage(im,0,0);
  67.         }else{
  68.           if(im.width > im.height){
  69.             const scalar = im.height / im.width;
  70.             ca.width = max;
  71.             ca.height = max * scalar;
  72.             ct.drawImage(im,0,0,max,max*scalar);
  73.           }else{
  74.             const scalar = im.width / im.height;
  75.             ca.width = max * scalar;
  76.             ca.height = max;
  77.             ct.drawImage(im,0,0,max*scalar,max);
  78.           }
  79.         }
  80.         let data = ct.getImageData(0,0,im.width,im.height).data;
  81.         let bestColor = 0;
  82.         let bestPercent = 0;
  83.         finalInfo = [];
  84.         let x = 0;
  85.         let y = 0;
  86.         let maxX = ca.width;
  87.         for(let i = 0; i < data.length; i+=4){
  88.             //loop through colors
  89.             /*global colors*/
  90.             if(x == maxX){
  91.                 console.log("x has hit max: " + maxX);
  92.                 y++;
  93.                 x = 0;
  94.             }
  95.             for(let j in colors){
  96.                 if(hcd(colors[j],rth(data[i],data[Number(i)+1],data[Number(i)+2])) > bestPercent){
  97.                     bestPercent = hcd(colors[j],rth(data[i],data[Number(i)+1],data[Number(i)+2]));
  98.                     bestColor = j;
  99.                 }
  100.             }
  101.             //if alpha is less than 40, dont push.
  102.             if(data[Number(i)+3] <= 40){
  103.                 x++;
  104.                 bestPercent = 0;
  105.                 bestColor = 0;
  106.                 continue;
  107.             }
  108.             //now that best color has been set, add to a thingy.
  109.             finalInfo.push({
  110.                 x: x,
  111.                 y: y,
  112.                 c: Number(bestColor)
  113.             });
  114.             x++;
  115.             bestPercent = 0;
  116.             bestColor = 0;
  117.         }
  118.         isPlacingImage = true;
  119.         sketchint = 0;
  120.         drawScale = SCALE;
  121.         console.log(finalInfo);
  122.     }
  123. }
  124.  
  125. /*global canvas*/
  126. /*global getMousePos*/
  127. /*global isPlacingImage*/
  128. /*global finalInfo*/
  129. /*global si*/
  130. canvas.addEventListener('click',function(e){
  131.     console.log('click!')
  132.     let x = Math.floor(getMousePos(canvas,e).x);
  133.     let y = Math.floor(getMousePos(canvas,e).y);
  134.     if(isPlacingImage){
  135.         console.log('placing image');
  136.         isPlacingImage = false;
  137.         di.style.display = "none";
  138.         //start interval
  139.         /*global io*/
  140.         /*global SCALE*/
  141.         var sketch = setInterval(function(){
  142.             if(finalInfo.length == 0){
  143.                 clearInterval(sketch);
  144.                 return;
  145.             }
  146.             if(sketchint >= finalInfo.length){
  147.                 clearInterval(sketch);
  148.                 console.log("done");
  149.                 return;
  150.             }
  151.             if(finalInfo[sketchint].x + (x/drawScale) >= 500 || finalInfo[sketchint].y + (y/drawScale) >= 500){
  152.                 sketchint++;
  153.                 console.log('hit canvas limit');
  154.                 return;
  155.             }
  156.             console.log('drawing');
  157.             //adding listener to skip over useless stuff..
  158.             /*global pixels*/
  159.             let ok = false;
  160.             while(!ok){
  161.                 if(pixels[finalInfo[sketchint].y + Math.floor(y/drawScale)][finalInfo[sketchint].x + Math.floor(x/drawScale)] == finalInfo[sketchint].c){
  162.                    sketchint++;
  163.                    continue;
  164.                 }
  165.                 ok = true;
  166.             }
  167.             io.emit('set',{x:finalInfo[sketchint].x + Math.floor(x/drawScale),y:finalInfo[sketchint].y + Math.floor(y/drawScale),c:finalInfo[sketchint].c});
  168.             sketchint++;
  169.         },300);
  170.     }
  171. });
  172.  
  173. function hcd(hex1, hex2) {
  174.     hex1 = hex1.split("#").length == 1 ? hex1 : hex1.split("#")[1];
  175.     hex2 = hex2.split("#").length == 1 ? hex2 : hex2.split("#")[1];
  176.     // get red/green/blue int values of hex1
  177.     var r1 = parseInt(hex1.substring(0, 2), 16);
  178.     var g1 = parseInt(hex1.substring(2, 4), 16);
  179.     var b1 = parseInt(hex1.substring(4, 6), 16);
  180.     // get red/green/blue int values of hex2
  181.     var r2 = parseInt(hex2.substring(0, 2), 16);
  182.     var g2 = parseInt(hex2.substring(2, 4), 16);
  183.     var b2 = parseInt(hex2.substring(4, 6), 16);
  184.     // calculate differences between reds, greens and blues
  185.     var r = 255 - Math.abs(r1 - r2);
  186.     var g = 255 - Math.abs(g1 - g2);
  187.     var b = 255 - Math.abs(b1 - b2);
  188.     // limit differences between 0 and 1
  189.     r /= 255;
  190.     g /= 255;
  191.     b /= 255;
  192.     // 0 means opposit colors, 1 means same colors
  193.     return (r + g + b) / 3;
  194. } //compare hex values
  195.  
  196. function rth(r, g, b) {
  197.     return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
  198. } //rbg to hex
  199.  
  200. function componentToHex(c) {
  201.     var hex = c.toString(16);
  202.     return hex.length == 1 ? "0" + hex : hex;
  203. }
  204.  
  205. di.append(fi,int);
  206. di.append(ca);
  207. document.body.append(di);
  208.  
  209. //add slider for zoom
  210. let sli = document.createElement('input'); //slider input. changes scale.
  211. sli.type = 'range';
  212. sli.min = 1;
  213. sli.max = 20;
  214. sli.value = 10;
  215. sli.step = 1;
  216. let fdiv = document.getElementById('colorpicker'); //a div that has the colors
  217. fdiv.append(sli);
  218. /*global draw*/
  219. sli.oninput = function(){
  220.     let DIMS = [pixels[0].length, pixels.length];
  221.     SCALE = sli.value;
  222.     canvas.width = SCALE * DIMS[0];
  223.     canvas.height = SCALE * DIMS[1];
  224.     draw(pixels);
  225.     if(isPlacingImage){
  226.         drawScale = SCALE;
  227.     }
  228. }
  229.  
  230. //hide color picker and slider
  231. document.body.addEventListener('keydown',togglePicker);
  232.  
  233. function togglePicker(e){
  234.     fdiv.style.display = e.keyCode == 16 ? fdiv.style.display == "none" ? "block" : "none" : fdiv.style.display;
  235. }