API tools faq
paste
Advertisement
AyrA

Color picker

AyrA
Jul 24th, 2015
331
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.11 KB | None | 0 0
raw download clone embed print report
  1. <!doctype HTML>
  2. <!-- https://jsfiddle.net/fj3xpn5u/ -->
  3. <html>
  4.     <head>
  5.         <title>Image reader</title>
  6.         <script type="text/javascript">
  7.             var c,f,ctx,i,p,d,s;
  8.             var MAX_SIZE=600;
  9.             window.onload=function()
  10.             {
  11.                 f=document.querySelector("input");
  12.                 c=document.querySelector("canvas");
  13.                 d=document.querySelector("div");
  14.                 i=document.querySelector("img");
  15.                 s=document.querySelector("span");
  16.                 ctx=c.getContext("2d");
  17.                 f.onchange=function()
  18.                 {
  19.                     var ff=f.files[0];
  20.                     if(ff)
  21.                     {
  22.                         var fr=new FileReader();
  23.                         fr.onloadend=function(e)
  24.                         {
  25.                             console.log(e);
  26.                             i.src=e.result||e.target.result;
  27.                            
  28.                         }
  29.                         fr.readAsDataURL(ff);
  30.                     }
  31.                 };
  32.                 i.onload=function()
  33.                 {
  34.                     var w=i.width;
  35.                     var h=i.height;
  36.                     if(w>MAX_SIZE || h>MAX_SIZE)
  37.                     {
  38.                         var factor=1;
  39.                         if(w>h)
  40.                         {
  41.                             factor=MAX_SIZE/w;
  42.                         }
  43.                         else
  44.                         {
  45.                             factor=MAX_SIZE/h;
  46.                         }
  47.                         w=w*factor|0;
  48.                         h=h*factor|0;
  49.                     }
  50.                     c.width=w;
  51.                     c.height=h;
  52.                     ctx.drawImage(i, 0, 0,w ,h);
  53.                     s.innerHTML="Image: width="+i.width+"; height="+i.height+"<br />"+
  54.                         "Display:"+w+"; height="+h;
  55.                 };
  56.                 c.onmousemove=function(e)
  57.                 {
  58.                     var x=e.offsetX;
  59.                     var y=e.offsetY;
  60.                     var col=getColor(x,y);
  61.                     var color="rgba("+col[0]+","+col[1]+","+col[2]+","+col[3]+")";
  62.                     d.style.background=color;
  63.                     preview(x,y);
  64.                 };
  65.                 c.onclick=function(e)
  66.                 {
  67.                     var x=e.offsetX;
  68.                     var y=e.offsetY;
  69.                     var col=getColor(x,y);
  70.                     if(col[3]===0xFF)
  71.                     {
  72.                         copy("rgb("+col[0]+","+col[1]+","+col[2]+")")
  73.                     }
  74.                     else
  75.                     {
  76.                         copy("rgba("+col[0]+","+col[1]+","+col[2]+","+col[3]+")");
  77.                     }
  78.                 }
  79.             };
  80.            
  81.             function getColor(x,y)
  82.             {
  83.                 var id=ctx.getImageData(x,y,1,1);
  84.                 return [id.data[0],id.data[1],id.data[2],id.data[3]];
  85.             }
  86.            
  87.             function preview(x,y)
  88.             {
  89.                 var c1=document.querySelectorAll("canvas")[0];
  90.                 var c2=document.querySelectorAll("canvas")[1];
  91.                 var ctx1=c1.getContext("2d");
  92.                 var ctx2=c2.getContext("2d");
  93.                 var region=ctx.getImageData(x-10, y-10, 21, 21);
  94.                 for(var i=0;i<21;i++)
  95.                 {
  96.                     for(var j=0;j<21;j++)
  97.                     {
  98.                         var rgba=
  99.                         {
  100.                             r:region.data[(i*21*4)+(j*4)+0],
  101.                             g:region.data[(i*21*4)+(j*4)+1],
  102.                             b:region.data[(i*21*4)+(j*4)+2]
  103.                         };
  104.                         ctx2.fillStyle="rgb("+rgba.r+","+rgba.g+","+rgba.b+")";
  105.                         ctx2.fillRect(j*10,i*10,10,10);
  106.                     }
  107.                 }
  108.                 ctx2.strokeStyle="red";
  109.                 ctx2.strokeRect(100,100,10,10);
  110.             }
  111.             function copy(text)
  112.             {
  113.                 window.prompt("Selected Color:", text);
  114.             }
  115.         </script>
  116.     </head>
  117.     <body>
  118.         <h1>Simple javascript color picker</h1>
  119.         <span>Please select an image</span><br />
  120.         <br />
  121.         <input type="file" accept="image/*"/><br /><br />
  122.         <canvas></canvas>
  123.         <canvas width="210" height="210"></canvas>
  124.         <div style="width:100px;height:100px;border:1px solid #FF0000"></div><br />
  125.         <img style="visibility:hidden" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=" alt="" />
  126.     </body>
  127. </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!