Hatena::Groupjavascript

JavaScriptで遊ぶよ

 | 

2009-05-15

モザイク処理ブックマークレットをgetImageDataで再発明

03:09

の続き。

こっちも再発明してみる。

以下のブックマークレットを実行すると、ページ内の画像が全部モザイクになる。

javascript:(function () {
  function averageColor(data,r,g,b,a){
    r = g = b = a = 0;
    var len = data.length;
    for(var i = len; i;){
      a += data[--i];
      b += data[--i];
      g += data[--i];
      r += data[--i];
    }
    len = len/4;
    return [r/len|0, g/len|0, b/len|0, a/len/256];
  }

  (function(){
    try{
      var img = document.getElementsByTagName('img')[0];
      if(!img) return;

      var canvas = document.createElement('canvas');
      var iw = canvas.width = img.width;
      var ih = canvas.height = img.height;
      var ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, iw, ih);
      img.parentNode.replaceChild(canvas, img);

      var size = 10;
      for(var y = 0; y < ih; y += size){
        var h = (size <= ih - y) ? size : ih - y;

        for(var x = 0; x < iw; x += size){
          var w = (size <= iw - x) ? size : iw - x;

          var data = ctx.getImageData(x,y,w,h).data;
          var color = averageColor( data );
          ctx.clearRect(x,y,w,h);
          ctx.fillStyle = 'rgba('+color+')';
          ctx.fillRect(x,y,w,h);
        }
      }
    }catch(e){
    }
    setTimeout(arguments.callee,0);
  })();
})();

例のごとく、同じドメインの画像にしか効かない。

デイリーポータルなんかで実行するとおもしろかった。

今回は Safari 4 Beta や Chrome 2 の開発版でも使える。

トラックバック - http://javascript.g.hatena.ne.jp/edvakf/20090515
 |