Need a unique gift idea?
A Pastebin account makes a great Christmas gift
SHARE
TWEET

Untitled

a guest Nov 16th, 2018 90 Never
Upgrade to PRO!
ENDING IN00days00hours00mins00secs
 
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset='UTF-8'>
  5.     <title>title</title>
  6.   </head>
  7.   <body>
  8.  
  9.     <div id='images'>
  10.       <img src='img.jpg' onload='init()' >
  11.     </div>
  12.  
  13.     <input type='range'
  14.       id='box-size'
  15.       name='volume'
  16.       min='1'
  17.       max='10'>
  18.  
  19.     <script>
  20.  
  21.     var img,
  22.         canvas,
  23.         ctx,
  24.         width,
  25.         height;
  26.  
  27.     function getMean(vals) {
  28.       return vals.reduce(function(sum, i) {
  29.         sum += i; return sum;
  30.       }) / vals.length;
  31.     }
  32.  
  33.     function getMedian(vals) {
  34.       vals.sort(function(i, j) { return i > j });
  35.       return vals[ parseInt(vals.length/2) ]
  36.     }
  37.  
  38.     function init() {
  39.       img = document.querySelector('img');
  40.       canvas = document.createElement('canvas');
  41.       ctx = canvas.getContext('2d');
  42.       width = img.width;
  43.       height = img.height;
  44.       draw();
  45.     }
  46.  
  47.     function draw() {
  48.  
  49.       var box = parseInt(document.querySelector('#box-size').value);
  50.  
  51.       // initialize the canvas
  52.       canvas.width = width;
  53.       canvas.height = height;
  54.       ctx.drawImage(img, 0, 0, width, height);
  55.       document.querySelector('#images').appendChild(canvas);
  56.  
  57.       // find the dominant hue in each block size
  58.       for (var x=0; x<Math.ceil(width/box); x++) {
  59.         for (var y=0; y<Math.ceil(height/box); y++) {
  60.           var vals = ctx.getImageData(x*box, y*box, box, box).data;
  61.           var mean = parseInt( getMean(vals) );
  62.           ctx.fillStyle = 'rgba(' + mean + ',' + mean + ',' + mean + ', 255)';
  63.           ctx.fillRect(x*box, y*box, box, box);
  64.         }
  65.       }
  66.     }
  67.  
  68.     document.querySelector('#box-size').addEventListener('change', draw)
  69.  
  70.     </script>
  71.  
  72.   </body>
  73. </html>
RAW Paste Data
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
 
Top