Image processing fun #2 by sxywu

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
  </style>
</head>

<body>
  <img src="https://pbs.twimg.com/profile_images/3775316964/fe2ba0b0a4f0fb30aaef37c089553a8d.jpeg" width="400" />
  <canvas id="canvas" width="500" height="500"></canvas>
  <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    d3.json('twitter_profile.json', function(image) {
      var imageData = ctx.getImageData(0,0,canvas.width, canvas.height);
      imageData.data = [];
      var threshold = 122.5;
      for (var i = 0; i < image.length; i += 4) {
        var maxVal = Math.max(image[i], image[i + 1], image[i + 2]);
        var val = maxVal > threshold ? 255 : 0;
        imageData.data[i] = val;
        imageData.data[i + 1] = val;
        imageData.data[i + 2] = val;
        imageData.data[i + 3] = 255;
      }

      ctx.putImageData(imageData, 0, 0);
    });
  </script>
</body>