Hatena::Groupjavascript

JavaScriptで遊ぶよ

 | 

2009-05-13

「画像をモノクロに変換するブックマークレット」をgetImageDataで再発明

06:11

元ネタ。

これを、昨日のやつ↓を使って書き直した。

実行すると、ページ内の画像を全部グレースケールに変換する。ただし、ドメインがページのものと異なるものはセキュリティのエラーで変換できない。

とりあえず Opera と Firefox ではうまくいく。Safari と Chromium は何がおかしいのかわからないけどうまくいかなかった。

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

  var canvas = document.createElement('canvas');

  var iw = canvas.width = ie.width;
  var ih = canvas.height = ie.height;

  var ctx = canvas.getContext('2d');

  ctx.drawImage(ie, 0, 0, iw, ih);
  var data = ctx.getImageData(0,0,iw,ih).data;
  var mod_data = [];
  var i = data.length;
 
 for (var y = ih; y--;){
    for (var x = iw; x--;){
      i -= 4;
      var c = 0.298912 * data[i] + 0.586611 * data[i+1] + 0.114478 * data[i+2];
      mod_data[i] = mod_data[i+1] = mod_data[i+2] = parseInt(c);
      mod_data[i+3] = data[i+3];
    }
  }

  ctx.clearRect(0,0,iw,ih);
  ctx.putImageData({height:ih,width:iw,data:mod_data},0,0);
  ie.parentNode.replaceChild(canvas, ie);

  setTimeout(arguments.callee, 100);
}catch(e){
  setTimeout(arguments.callee,0);
}
}) ();

画像が全部同じドメインのサイトじゃないとうまくいかない。

os0xos0x2010/02/16 20:39すごく今更ですが、Chromeで動かないのは、
> 第 1 引数が ImageData オブジェクトでなければ、TYPE_MISMATCH_ERR 例外が発生します。他の引数のいずれかひとつでも有限でないなら、NOT_SUPPORTED_ERR 例外が発生します。
> http://www.html5.jp/canvas/ref/method/getImageData.html
だからですね。

edvakfedvakf2010/02/17 02:18そうですね。当時の仕様案には width height data を持ったオブジェクトなら何でも渡せると書いてあって、いずれ WebKit でも使えるようになるだろうと思って放置しておいたんですが、仕様が変わって ImageData オブジェクトじゃないといけなくなったので上のコードは間違いになってしまいました。

 |