みかづきブログ その3

3ヶ月つづけてみました。

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"));

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