ノヴム・オペラヌム

画像を開いた後でブックマークレットを実行すると画像がモノクロになります。ただし、変換した画像を保存したりすることはできません。

これが

こうなる

ブックマークレット

javascript:(function(){if(window.location.href.match(/^.*\.(jpe?g|bmp|gif|png)$/i)){var ie=document.getElementsByTagName('img')[0];var io=new Image();io.src=ie.src;var canvas=document.createElement('canvas');canvas.width=io.width;canvas.height=io.height;var ctx=canvas.getContext('2d');ctx.drawImage(io,0,0,io.width,io.height);ie.parentNode.replaceChild(canvas,ie);var gctx=canvas.getContext('opera-2dgame');gctx.lockCanvasUpdates(true);var ih=canvas.height;var iw=canvas.width;for(var y=ih;y--;){for(var x=iw;x--;){var color=parseInt(gctx.getPixel(x,y).substr(1),16);var r=color>>16;var g=color>>8&255;var b=color&255;var c=0.298912*r+0.586611*g+0.114478*b;gctx.setPixel(x,y,'rgb('+c+','+c+','+c+')');}}gctx.lockCanvasUpdates(false);gctx.updateCanvas();}})();

整形したソースコード

(function () {
  if (window.location.href.match(/^.*\.(jpe?g|bmp|gif|png)$/i)) {
    var ie = document.getElementsByTagName('img')[0];
    var io = new Image();

    io.src = ie.src;

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

    canvas.width = io.width;
    canvas.height = io.height;

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

    ctx.drawImage(io, 0, 0, io.width, io.height);
    ie.parentNode.replaceChild(canvas, ie);

    var gctx = canvas.getContext('opera-2dgame');

    gctx.lockCanvasUpdates(true);

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

    for (var y = ih; y--;){
      for (var x = iw; x--;){
        var color = parseInt(gctx.getPixel(x, y).substr(1), 16);
        var r = color >> 16;
        var g = color >> 8 & 255;
        var b = color & 255;
        var c = 0.298912 * r + 0.586611 * g + 0.114478 * b;

        gctx.setPixel(x, y, 'rgb(' + c + ',' + c + ',' + c + ')');
      }
    }

    gctx.lockCanvasUpdates(false);
    gctx.updateCanvas();
  }
}) ();

補足

• 画像をcanvas要素に突っ込み、ピクセル単位でグレースケール変換しています。
• opera-2dgameコンテキストを利用しているため、Opera以外では動きません。
• 滅茶苦茶重いです。スペックが低い場合や大きい画像を変換する場合は数分から数十分単位で時間がかかります。
• 最初はページに存在する全ての画像をグレースケール変換するUserJSを書いていたんですが、Operaが落ちまくるのでやめました。
• 画像一つだけでも、環境によってはOperaがクラッシュする可能性があります。
• まあ、お遊びというか、Operaならこんなこともできるんだぜという事で。

参考にした

• The 'Opera-2dgame' Canvas Context - Web Applications Blog - by Web Applications
• osakana.factory - グレースケールのひみつ