☰

pixely.cf tools

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

当前为 2018-11-28 提交的版本，查看 最新版本。

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