API tools faq
paste
Advertisement
Gannon_

img.html

Gannon_
Jun 7th, 2013
95
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 9.18 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <head>
  5.     <title>LUA GENARATION IMAGE</title>
  6.  
  7.     <script type="text/javascript">
  8.  
  9.     var DEBUG ;
  10.  
  11.     var PIXEL_W = 6 ;
  12.     var PIXEL_H = 8 ;
  13.     var T_MONITOR_H = [ 0, 5,12,19,26,33,40] ;
  14.     var T_MONITOR_W = [ 0, 7,18,29,39,50,61,71,82] ;
  15.     var MONITOR_H = 5 ;
  16.     var MONITOR_W = 7 ;
  17.     var MAX_MONITOR_W = 8 ;
  18.     var MAX_MONITOR_H = 6 ;
  19.     var PIXEL_BORD_MONITOR = 12 ;
  20.  
  21.     var CARRON_RATE = 10 ;
  22.     var CARRON_OFFSET = 0 ;
  23.  
  24.     var COLOR = [
  25.         [255,255,255],
  26.         [255,127,0],
  27.         [255,0,255],
  28.         [173,216,230],
  29.         [255,255,0],
  30.         [158,253,56],
  31.         [255,192,203],
  32.         [128,128,128],
  33.         [211,211,211],
  34.         [0,255,255],
  35.         [128,0,128],
  36.         [0,0,255],
  37.         [150,75,0],
  38.         [0,128,0],
  39.         [255,0,0],
  40.         [0,0,0],
  41.     ];
  42.  
  43.     // Color en hls
  44.     var COLOR_HLS = new Array() ;
  45.  
  46.     ImageData.prototype.getPixel = function(x,y){
  47.        
  48.         return [ this.data[(x+y*this.width)*4] ,
  49.                  this.data[(x+y*this.width)*4 + 1] ,
  50.                  this.data[(x+y*this.width)*4 + 2] ,
  51.                  this.data[(x+y*this.width)*4 + 3] ,
  52.         ];
  53.     }
  54.     ImageData.prototype.setPixel = function(x,y,r,v,g,a){
  55.        
  56.         this.data[(x+y*this.width)*4] = r ;
  57.         this.data[(x+y*this.width)*4 + 1] = v ;
  58.         this.data[(x+y*this.width)*4 + 2] = g ;
  59.         this.data[(x+y*this.width)*4 + 3] = a ;
  60.  
  61.     }
  62.  
  63.     function RGBtoHSL(r,g,b){
  64.         var r1 = r / 255;
  65.         var g1 = g / 255;
  66.         var b1 = b / 255;
  67.      
  68.         var maxColor = Math.max(r1,g1,b1);
  69.         var minColor = Math.min(r1,g1,b1);
  70.         //Calcul L:
  71.         var L = (maxColor + minColor) / 2 ;
  72.         var S = 0;
  73.         var H = 0;
  74.         if(maxColor != minColor){
  75.             //Calcul  S:
  76.             if(L < 0.5){
  77.                 S = (maxColor - minColor) / (maxColor + minColor);
  78.             }else{
  79.                 S = (maxColor - minColor) / (2.0 - maxColor - minColor);
  80.             }
  81.             //Calcul H:
  82.             if(r1 == maxColor){
  83.                 H = (g1-b1) / (maxColor - minColor);
  84.             }else if(g1 == maxColor){
  85.                 H = 2.0 + (b1 - r1) / (maxColor - minColor);
  86.             }else{
  87.                 H = 4.0 + (r1 - g1) / (maxColor - minColor);
  88.             }
  89.         }
  90.         H = H * 60;
  91.         if(H<0){
  92.             H += 360;
  93.         }
  94.         return [H, S, L];
  95.     }
  96.  
  97.     /**
  98.         Retourne la couleur la plus proche
  99.     */
  100.     function getConsoleColor(r,g,b){
  101.  
  102.         var rate = document.getElementById('Crate').value ;
  103.         var offset = document.getElementById('Coffset').value ;
  104.  
  105.         var s_HLS = RGBtoHSL(r,g,b);
  106.  
  107.         var fid = -1 ;
  108.         var distance_min = null ;
  109.         for( var id in COLOR ){
  110.            
  111.             var distance = distanceCarron(s_HLS[0],s_HLS[1],s_HLS[2],
  112.                                     COLOR_HLS[id][0],COLOR_HLS[id][1],COLOR_HLS[id][2],
  113.                                     rate,offset);
  114.             //console.log(distance);
  115.             if( distance < distance_min || distance_min == null ){
  116.                 fid = id ;
  117.                 distance_min =distance ;
  118.             }
  119.         }
  120.  
  121.         return COLOR[fid];
  122.  
  123.     };
  124.  
  125.     function distanceCarron(h0,l0,s0,h1,s1,l1,rate,offset){
  126.         var a_s0 = ( (Math.PI / 2) + Math.atan(rate*(s0-offset)) ) / Math.PI ;
  127.         var a_s1 = ( (Math.PI / 2) + Math.atan(rate*(s1-offset)) ) / Math.PI ;
  128.  
  129.         var alpha = Math.sqrt(a_s0*a_s1);
  130.  
  131.         var delta_h = Math.min( Math.abs(h1-h0) , 1 - Math.abs(h1-h0) );
  132.         var delta_l = Math.abs( l1 - l0 ) ;
  133.  
  134.         var distance = (alpha * delta_h) + ( (1- alpha) * delta_l ) ;
  135.  
  136.         return Math.abs(distance);
  137.         //return distance ;
  138.  
  139.     }
  140.  
  141.  
  142.  
  143.     function dessineImage(canvas,ctx,img){
  144.         var deltaWidth = canvas.width / img.width ;
  145.         var deltaHeight = canvas.height / img.height ;
  146.  
  147.         var delta = Math.min(deltaWidth,deltaHeight)
  148.         ctx.clearRect(0, 0, canvas.width, canvas.height);
  149.         ctx.drawImage(img,
  150.             (canvas.width-img.width*delta)/2,
  151.             (canvas.height-img.height*delta)/2,
  152.             img.width*delta,
  153.             img.height*delta)
  154.     }
  155.  
  156.     /*
  157.     function regroupePixel(data,x,y){
  158.  
  159.     }
  160.     //*/
  161.  
  162.     function dessineEcran(canvasSource,x,y,w,h){
  163.        
  164.  
  165.         var nbMonitorH = document.getElementById('nbMonitorH').value ;
  166.         var nbMonitorW = document.getElementById('nbMonitorW').value ;
  167.  
  168.         var canvas = document.getElementById("canvasResult")
  169.         var ctx    = canvas.getContext("2d");
  170.  
  171.         //*
  172.         var canvas2 = document.getElementById("canvasResult2")
  173.         var ctx2    = canvas2.getContext("2d");
  174.         //*/
  175.  
  176.         var tempCanvas = document.createElement('canvas')
  177.  
  178.         tempCanvas.width = w ;
  179.         tempCanvas.height = h ;
  180.  
  181.         var data = canvasSource.getContext("2d").getImageData(x,y,w,h);
  182.    
  183.         tempCanvas.getContext("2d").putImageData(data,0,0)
  184.      
  185.  
  186.         canvas.width = T_MONITOR_W[nbMonitorW] * PIXEL_W ;
  187.         canvas.height = T_MONITOR_H[nbMonitorH]  * PIXEL_H;
  188.        
  189.         //*
  190.         canvas2.width = T_MONITOR_W[nbMonitorW] * PIXEL_W ;
  191.         canvas2.height = T_MONITOR_H[nbMonitorH]  * PIXEL_H;
  192.         //*/
  193.  
  194.         ctx.drawImage(tempCanvas,0,0,canvas.width,canvas.height)
  195.  
  196.         data = ctx.getImageData(0,0,canvas.width,canvas.height);
  197.  
  198.         //*
  199.         data2 = ctx2.getImageData(0,0,canvas.width,canvas.height);
  200.         //*/
  201.  
  202.         //DEBUG =data;
  203.         //console.log(data)
  204.  
  205.    
  206.         //console.log(canvas.width)
  207.         for( var w = 0 ; w < T_MONITOR_W[nbMonitorW] ; w++ ){
  208.             for( var h = 0 ; h <  T_MONITOR_H[nbMonitorH] ;h++ ) {
  209.                 var nbPixel = PIXEL_W * PIXEL_H ;
  210.                 var TR = 0 ;
  211.                 var TG = 0 ;
  212.                 var TB = 0 ;
  213.                 for( var pw = 0 ; pw < PIXEL_W ; pw++){
  214.                     for( var ph = 0 ; ph < PIXEL_H ; ph++){
  215.                         var tx = w*PIXEL_W+pw;
  216.                         var th = h*PIXEL_H+ph;
  217.                         var pixel = data.getPixel(tx,th)
  218.                         TR += pixel[0]
  219.                         TG += pixel[1]
  220.                         TB += pixel[2]
  221.                        
  222.                     }
  223.                 }
  224.                 TR /= nbPixel ;
  225.                 TG /= nbPixel ;
  226.                 TB /= nbPixel ;
  227.  
  228.                 CConsole = getConsoleColor(TR,TG,TB);
  229.  
  230.                 for( var pw = 0 ; pw < PIXEL_W ; pw++){
  231.                     for( var ph = 0 ; ph < PIXEL_H ; ph++){
  232.                         var tx = w*PIXEL_W+pw;
  233.                         var th = h*PIXEL_H+ph;
  234.  
  235.                         data.setPixel(tx,th,TR,TG,TB,255);
  236.                         data2.setPixel(tx,th,CConsole[0],CConsole[1],CConsole[2],255);
  237.                     }
  238.                 }
  239.  
  240.                
  241.             }
  242.         }
  243.        
  244.  
  245.  
  246.         ctx.putImageData(data,0,0);
  247.         ctx2.putImageData(data2,0,0)
  248.  
  249.         //creation du code
  250.     }
  251.  
  252.  
  253.  
  254.     window.onload = function(){
  255.        
  256.         document.getElementById('b1').addEventListener('click',function(){
  257.             var c1 = document.getElementById('c1').value;
  258.             var c2 = document.getElementById('c2').value;
  259.             var c3 = document.getElementById('c3').value;
  260.  
  261.             var c = getConsoleColor(c1,c2,c3) ;
  262.  
  263.             document.getElementById('cc1').style.backgroundColor = 'rgb('+c1+','+c2+','+c3+')' ;
  264.             document.getElementById('cc2').style.backgroundColor = 'rgb('+c[0]+','+c[1]+','+c[2]+')' ;
  265.  
  266.         },true);
  267.  
  268.         var butGen = document.getElementById("genere");
  269.         var urlImg = document.getElementById("urlImage");
  270.         var canvas = document.getElementById("canvas");
  271.  
  272.         var ctx    = canvas.getContext("2d");
  273.  
  274.         var img =  document.createElement("img")
  275.         if( localStorage['temp'] != undefined ){
  276.             img.src = localStorage['temp']
  277.         }
  278.  
  279.         for( var id in COLOR ){
  280.             COLOR_HLS.push(RGBtoHSL(COLOR[id][0],COLOR[id][1],COLOR[id][2]));
  281.         }
  282.  
  283.        
  284.  
  285.         urlImg.addEventListener('change',function(e){
  286.             var fr = new FileReader();
  287.            
  288.             fr.onload = function(e){
  289.                 img.src = e.target.result
  290.                 localStorage['temp'] = e.target.result
  291.             };  
  292.            
  293.             fr.readAsDataURL(e.target.files[0]);
  294.  
  295.             },false);
  296.  
  297.         butGen.addEventListener('click',function(){
  298.             //Dessine l'image pour le cadrage
  299.             dessineImage(canvas,ctx,img)
  300.             //temp
  301.             var deltaWidth = canvas.width / img.width ;
  302.             var deltaHeight = canvas.height / img.height ;
  303.             var delta = Math.min(deltaWidth,deltaHeight)
  305.             /*data = ctx.getImageData((canvas.width-img.width*delta)/2,
  306.                 (canvas.height-img.height*delta)/2,
  307.                 img.width*delta,
  308.                 img.height*delta);*/
  309.            
  310.             dessineEcran(canvas,(canvas.width-img.width*delta)/2,
  311.                 (canvas.height-img.height*delta)/2,
  312.                 img.width*delta,
  313.                 img.height*delta);
  314.             //}
  315.         },true);
  317.     }
  318.     </script>
  319.  
  320. </head>
  321.  
  322. <body>
  323.  
  324.     <input type="file" id="urlImage">
  325.     <button id="genere">Généré</button>
  326.  
  327.     <span>Nb monitor W</span>
  328.     <select id='nbMonitorW'>
  329.         <option value='1'>1</option>
  330.         <option value='2'>2</option>
  331.         <option value='3'>3</option>
  332.         <option value='4'>4</option>
  333.         <option value='5'>5</option>
  334.         <option value='6'>6</option>
  335.         <option value='7'>7</option>
  336.         <option value='8' selected="selected" >8</option>
  337.     </select>
  338.  
  339.     <span>Nb monitor H</span>
  340.     <select id='nbMonitorH' >
  341.         <option value='1'>1</option>
  342.         <option value='2'>2</option>
  343.         <option value='3'>3</option>
  344.         <option value='4'>4</option>
  345.         <option value='5'>5</option>
  346.         <option value='6' selected="selected" >6</option>
  347.     </select>
  348.  
  349.     <span>CARRON RATE</span>
  350.     <input id='Crate' type='text' value='0.07'>
  351.  
  352.     <span>CARRON OFFSET</span>
  353.     <input id='Coffset' type='text' value='50'>
  354.  
  355.  
  356.     <br>
  357.  
  358.     <canvas  style="border:1px solid black" id='canvas' width="300" height="300" ></canvas><br>
  359.     <canvas  style="border:1px solid black" id='canvasResult'></canvas>
  360.     <canvas  style="border:1px solid black" id='canvasResult2'></canvas>
  361.  
  362.     <textarea id="code"></textarea>
  363.  
  364.     <div>
  365.         <span>R</span><input type="number" id='c1' min="0" max="255" value='128'>
  366.         <span>G</span><input type="number" id='c2' min="0" max="255" value='0'>
  367.         <span>B</span><input type="number" id='c3' min="0" max="255" value='64' >
  368.         <button id='b1'>Color Teste</button>
  369.     </div>
  370.     <div id="cc1" style='height:50px;background-color:red'></div>
  371.     <div id="cc2" style='height:50px;background-color:red'></div>
  372. </body>
  373. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!