To Top Page

JavaScriptで画像以外をモノクロに

いきてますよ．

ネタ元は以下．

いちいち書き換えるの面倒ですし，書き換えると元に戻すのも大変ですし．そんな訳でJavaScriptで元ファイルに改変加えないで，グレイスケール化しようと．まぁ，需要はなさそうですが．

Chrome3, Firefox3, IE6, IE8, Opera10, Safari4で動作は確認，特に異常は見つかりませんでした（が，何か見逃しがあるかもしれません）．

function ntsc(rgb){
    numExp1 = /((\d{1,3})\s*,\s*){2}(\d{1,3})/g;
    numExp2 = /#([a-fA-F0-9]{2}){3}/ig;
    if(rgb.search(numExp1) != -1){
        nums = rgb.match(numExp1)[0].split(/\s*,\s*/);
    }else{
        nums = new Array(3);
        nums[0] = parseInt(rgb.slice(1,3), 16);
        nums[1] = parseInt(rgb.slice(3,5), 16);
        nums[2] = parseInt(rgb.slice(5), 16);
    }
    val = (((30 * nums[0] + 59 * nums[1] + 11 * nums[2]) / 100).toFixed(0) - 0).toString(16);
    return "#" + val + val + val;
}
 
function init(){
    var isMSIE = /*@cc_on!@*/false;
    if(isMSIE) ssdata = document.styleSheets[0].rules;
    else ssdata = document.styleSheets[0].cssRules;
    swrd = /(rgb\([^\)]*\))/g;
    swrd2 = /#([a-fA-F0-9]{2}){3}/g;
    for(var i = 0; i < ssdata.length; i++){
        if(ssdata[i].style == null) continue;
        sty = ssdata[i].style.cssText;
        tg = ssdata[i].selectorText;
        matches = sty.match(swrd) || sty.match(swrd2);
        if(matches != null){
            for(var j = 0; j < matches.length; j++){
                sty = sty.replace(matches[j], ntsc(matches[j]));
            }
            if(isMSIE){
                document.styleSheets[0].removeRule(i);
                document.styleSheets[0].addRule(tg, sty, i);
            }else{
                document.styleSheets[0].deleteRule(i);
                document.styleSheets[0].insertRule(tg + " {" + sty + "}", i);
            }
        }
    }
}

if(window.addEventListener) window.addEventListener("load", init, false);
else if(window.attachEvent) window.attachEvent("onload", init);
else window.onload = init;

StyleSheet Objectの中から色情報だけ引っこ抜いてグレイスケールに変換して，変換した情報をStyleSheet Objectに追加．それだけ．

画像もグレイスケールにするのは，どうにもいい方法が見つかりません．探せば<canvas>使った方法が引っかかったりしますが，ざっと見た限り，ピクセル単位で読み込んで強引に書き換えてるっぽいので負担が半端無い．私の駄目スペックPCだと最悪PCごと落ちちゃいそうなので試しませんし試せません．

IEだとfilter:gray()とかいうのがあるらしいですが，そもそもIEだけってどうしようもないですし，前述のギャルゲーブログさんみたいな所や，更に両サイドに画像広告張りまくってる所だと，画像枚数が多すぎて処理速度とかどうなっちゃうんでしょうか．検証してませんし検証するつもりもないですが，かなりPCに厳しいことになりそうな雰囲気が……．何かいい方法無いんですかねぇ……．

余談：グレイスケールの画像事前に用意してJavaScriptでswapっていう手もありますが，それやる手間を惜しまないならもうcssを0から書いちゃえよyou！

みたいな．

一ヶ月以上すぎてから言うのもアレですが，あけましておめでとうございます今年も死なないようにてきとーにがんばります

参考文献