CSS


/**
** Pixle Colors <img> <body> / element
** @webbeloz _dev. / design*
** like Modal / pic / background on @twitter
*/
html, body {
  margin: 0;
  height: 100%;
}
body {
  background-color: #141414;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
img {}



JS


var img = new Image();                            
img.crossOrigin = "";                             
img.onload = function() {                         
  var div = document.querySelector("body");
  div.appendChild(this);                           
  div.style.background = analyse(img, 5);         
}
//img.src = "http://flyfishing.webbeloz.it/assets/sites/2/wmdtV.png";
var a = ['http://flyfishing.webbeloz.it/assets/sites/2/wmdtV.png', 'http://flyfishing.webbeloz.it/assets/sites/2/y7BKW.jpg', 'http://flyfishing.webbeloz.it/assets/sites/2/Bw7jB.jpg'];
img.src = a[Math.floor(Math.random() * a.length)];

function analyse(img, border) {
  var canvas = document.createElement("canvas"),  
      ctx = canvas.getContext("2d"),              
      w = img.naturalWidth,                       
      h = img.naturalHeight;
  
  canvas.width = w;                               
  canvas.height = h;
  
  ctx.drawImage(img, 0, 0);                       
  
  // do checks:, for example:
  //if (border*2 > canvas.width || border*2 > canvas.height) throw "Image too small!";
  
  // get borders, avoid overlaps (though it does not really matter in this case):
  var top = ctx.getImageData(0, 0, w, border).data;
  var left = ctx.getImageData(0, border, border, h - border*2).data;
  var right = ctx.getImageData(w - border, border, border, h - border*2).data;
  var bottom = ctx.getImageData(0, h - border, w, border).data;
  
  var r = 0, g = 0, b = 0, cnt = 0;
  
  // count pixels and add up color components: (see function below)
  countBuffer(top);
  countBuffer(left);
  countBuffer(right);
  countBuffer(bottom);
  
  // calc average
  r = (r / cnt + 0.5)|0;
  g = (g / cnt + 0.5)|0;
  b = (b / cnt + 0.5)|0;
  
  return "rgb(" + r + "," + g + "," + b + ")";
  
  function countBuffer(data) {
    var i = 0, len = data.length;
    while(i < len) {
        r += data[i++];   // add red component etc.
        g += data[i++];
        b += data[i++];
        i++;
        cnt++;            // count one pixel
    }
  }
  
}




CodePlay Playground as you play with the keyboard:

Console

The CodePlay Code Box Editors Playground is very simple to use, anyone can directly interact with a minimum of knowledge of HTML experience, live an idea or a project. We believe that only 5% of the developers has the full capacity and knowledge of each key on the keyboard. Therefore we decided to put together a single command from the Key [Esc] == 27.
For every need and every situation the keyboard [Esc] key fixes and puts in place the Original Initial Code Box Editors.
All this without losing the contents of each Box Editors .
!Enjoy your CodePlay.


CodePlay Playground is a project based on WordPress entirely revised to have a clean and dynamic HTML output.

Editor:

- [Esc] To reset the Box Editors and the closure of any open window overlay, including the Output (FULL) Preview.

New! - Double Click to Expand /Open & Close All Box Editors

New! - Ctrl + Up/Down to Show /Hide the Footer Bar. This allows hide footer bar when you want, + ESC to Back.

New! - Preview in Full page is now also possible via dblClick on the Vertical Drag-bar. Each keyboard action can be Reset via the ESC button.


Ex.
- Close this? [Esc], or a Click outside.


Front End User - New /Save Post is Now Open, Register *required.
New Play Now