画像(<img 〜/>)をグレースケールにするjQueryプラグイン

HTML文書上の画像をグレースケールに変換します。

厳密に言うと、IMG要素にロードされている画像を、CANVAS要素にグレースケールでレンダリングし、IMG要素の直後に追加します(ので、何もしないとカラー画像とグレースケール画像が並んで表示されます)。
ですのでCANVASの機能がメインで、jQueryは要素の取得と挿入に使っているだけです。

位置はCSSで調整してください。

また、”greyImageLoaded” に functionをbindしておくと、レンダリングが終わった時点で実行されますので、描画されたCANVAS要素に働きかけたい場合はこのイベントを利用してください。
これは、各IMGのロードが終わったタイミングでグレー画像のレンダリングを実行しているため、普通に実行してもCANVASが描画されていない可能性があるからです。

コード

$.fn.AddGreyImage = function(options) {
options = $.extend({
 R_bias: 0.3,
 G_bias: 0.59,
 B_bias: 0.11
}, options);
if (document.createElement('canvas').getContext != true) {
 var imgs = ($(this).get(0).tagName == "img") ? $(this) : $("img", this)
   , items = imgs.length;
 imgs.each(function(){
  $(this).bind("load", function() {
   var i = $(this);
   var classname = "grey_image"
    + " grey_image_src:" + i.attr("src")
    + " grey_image_name:" + i.attr("src").replace(new RegExp(/^.*?\x2f?([^\x2f]*?)$/), "$1")
    + " grey_image_name_" + i.attr("src").replace(new RegExp(/^.*?\x2f?([^\x2f]*?)(?:\x2e[^\x2e]*)$/), "$1")
     , w = i.outerWidth(), h = i.outerHeight()
     , canvas = $('<canvas></canvas>').attr( { "width": w, "height": h, "class":classname } )
     , c = canvas.get(0).getContext("2d")
    ;
   c.drawImage(i.get(0),0,0,w,h);
   var d = c.getImageData(0,0,w,h)
     , px = d.data
     , j = 0
     , grey;
   for (; j<px.length; j+=4) {
	px[j] = px[j+1] = px[j+2] = px[j] * options["R_bias"] + px[j+1] * options["G_bias"] + px[j+2] * options["B_bias"];
   }
   c.putImageData(d,0,0);
   i.after(canvas);
   items--;
   if (items == 0) $(window).trigger("greyImageLoaded");
  });
 })
}
return this;
}

テスト

linux-debian_00305697

Leave a Reply