Canvasをつかって画像をぼかす習作

いつもはCSSのfilterをつかってぼかすのですが、 Android4.3以前も対応させようとするとそうもいきません 。

developer.mozilla.org
Can I use... Support tables for HTML5, CSS3, etc

というわけでCanvasをつかって画像をぼかす習作をつくってみました。
自分と自分の周りのピクセルの平均値を取って己の色を再設定しています。
（ロジックの手を抜いているので左右もつながってしまっています）

DEMO

JavaScript

  (function canvasBlur(win, doc, canvas) {
    var body = doc.body,
        img  = new Image(),
        ctx  = canvas.getContext("2d"),
        imgData, data;
    
    img.onload = function() {
      var WIDTH   = this.width / 4,
          HEIGHT  = this.height / 4,
          LEVEL   = 9,
          posList = [],
          r, g, b, count;

      canvas.width  = WIDTH;
      canvas.height = HEIGHT;
      canvas.style.cssText += "; width: " + WIDTH * 2 + "px; heihgt: " + HEIGHT * 2 + "px;";

      ctx.drawImage(this, 0, 0, WIDTH, HEIGHT);

      imgData = ctx.getImageData(0, 0, WIDTH,  HEIGHT);
      data    = imgData.data;

      for (var i = 0, length = data.length; i < length; i += 4) {
        count   = 0;
        r       = 0;
        g       = 0;
        b       = 0;

        for (var j = 0, jLength = LEVEL * LEVEL; j < jLength; ++j) {
          posList[j] = i + (4 * ((j / LEVEL | 0) - (LEVEL / 2 | 0))) * WIDTH + (4 * (j % LEVEL) - (LEVEL - 1) * 2);
        }

        _blur(posList, length);
      }
        
      ctx.putImageData(imgData, 0, 0);

      function _blur(arr, length) {
        for (var k = 0, kLength = arr.length; k < kLength; ++k) {
          if (0 <= arr[k] && arr[k] < length) {
            ++count;

            r += data[arr[k] + 0];
            g += data[arr[k] + 1];
            b += data[arr[k] + 2];
          }
        }

        data[i + 0] = r / count;
        data[i + 1] = g / count;
        data[i + 2] = b / count;
      }
    };
    
    img.src = "http://jsrun.it/assets/m/8/N/9/m8N9Y.jpeg";
    
  })(this, document, document.getElementById("canvasBlur"));

全員が全員、周りにあわせようにするとぼけぼけになるというのは、画像でも社会でも同じことなのかもしれないですね。