Colors!

codingJWilliams · codingJWilliams · commit 9606544b02a6 · 2017-08-15T15:37:24.000+01:00
diff --git a/assets/color.js b/assets/color.js
@@ -0,0 +1,51 @@
+function color(imgSrc){
+  var img = document.createElement('img');
+  img.src = imgSrc;
+  var rgb = getAverageRGB(img);
+  return rgb
+}
+
+function getAverageRGB(imgEl) {
+  var blockSize = 5, // only visit every 5 pixels
+      defaultRGB = {r:0,g:0,b:0}, // for non-supporting envs
+      canvas = document.createElement('canvas'),
+      context = canvas.getContext && canvas.getContext('2d'),
+      data, width, height,
+      i = -4,
+      length,
+      rgb = {r:0,g:0,b:0},
+      count = 0;
+
+  if (!context) {
+      return defaultRGB;
+  }
+
+  height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
+  width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;
+
+  context.drawImage(imgEl, 0, 0);
+
+  try {
+      data = context.getImageData(0, 0, width, height);
+  } catch(e) {
+      /* security error, img on diff domain */alert('x');
+      return defaultRGB;
+  }
+
+  length = data.data.length;
+
+  while ( (i += blockSize * 4) < length ) {
+      ++count;
+      rgb.r += data.data[i];
+      rgb.g += data.data[i+1];
+      rgb.b += data.data[i+2];
+  }
+
+  // ~~ used to floor values
+  rgb.r = ~~(rgb.r/count);
+  rgb.g = ~~(rgb.g/count);
+  rgb.b = ~~(rgb.b/count);
+
+  return rgb;
+
+}
diff --git a/html/game.html b/html/game.html
@@ -20,6 +20,7 @@
   <!-- Latest compiled and minified CSS -->
   <link rel="stylesheet" href="https://bootswatch.com/cyborg/bootstrap.min.css" crossorigin="anonymous">
   <!-- Latest compiled and minified JavaScript -->
+  <script src="color.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
   <body style="background-color: transparent;">
     <center>
