Image processing fun #3

Using the basic dithering concept (simple error diffusion) outlined in Image Dithering: Eleven Algorithms and Source Code.

Built with blockbuilder.org

forked from sxywu's block: Image processing fun #1

forked from sxywu's block: Image processing fun #2

<!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 = [];
      // turn it grayscale first
      for (var i = 0; i < image.length; i += 4) {
        if ((i / 4) % canvas.width === 0) {
          // for every new line, set error back to 0
        	error = 0;  
        }
        var val = Math.max(image[i], image[i + 1], image[i + 2]);
        imageData.data[i] = val;
        imageData.data[i + 1] = val;
        imageData.data[i + 2] = val;
        imageData.data[i + 3] += 255;
      }
      
      var data = imageData.data;
      var threshold = 122.5;
      // simple error diffusion to dither
      for (var i = 0; i < data.length; i += 4) {
        if ((i / 4) % canvas.width === 0) {
          // for every new line, set error back to 0
        	error = 0;  
        }
        var oldPixel = data[i];
        var newPixel = oldPixel > threshold ? 255 : 0;
        var error = oldPixel - newPixel;
        imageData.data[i] = newPixel;
        imageData.data[i + 1] = newPixel;
        imageData.data[i + 2] = newPixel;
        imageData.data[i + 4] += error;
        imageData.data[i + 5] += error;
        imageData.data[i + 6] += error;
      }

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

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js