☰

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