ブログ内検索

by Futomi Hatano

画像の縁取りを演出する bevel.js

画像を演出する JavaScript ライブラリはいろいろありますが、先日、canvas を使った画像の縁取りを演出する bevel.js がリリースされましたので、試してみました。

head要素で、bevel.js をロードする script 要素を記述しておき、img 要素の class 属性に "bevel" を指定するだけで、その画像に縁取りを与えたりシェード(影)を加えたりすることができます。

head 要素内の script 要素
<script type="text/javascript" src="bevel.js" mce_src="bevel.js"></script>
img 要素
<img src="bevel_test.jpg" mce_src="bevel_test.jpg" alt="デフォルト" class="bevel" />

下のキャプチャ画像は、上段がエフェクト前のオリジナルの画像で、下段がエフェクト後の画像です。(Firefox 2 で試したものです。)

適用前


適用後


bevel.js を使っていくつかのエフェクトを試してみましたが、img要素の class 属性にエフェクトを指定するキーワードを入れるだけで、非常に簡単に利用することができます。

bevel.js は画像に効果を与えるために canvas を使っています。しかし、Internet Explorer はネイティブで canvas が実装されていないため、VML を使っているようです。そのためか、Internet Explorer では、画像のエフェクトの結果が、若干異なってきます。

bevel.js のソースコードを見て気づいたのですが、bevel.js は onload イベントハンドラを使っていました(window.onload)。そのため、もし window.onload を使った別のスクリプトをロードしようとすると、後からロードされたスクリプトの window.onload で上書きされてしまいますので、先にロードされたスクリプトが動作しません。このあたり、注意が必要ですね。

bevel.js のライセンスですが、非商用においてフリーとのことです。商用利用においては別途、商用ライセンスが用意されており、個別に問い合わせしなければいけないようです。ご利用の際には、事前にライセンスをチェックしておきましょう。

この投稿は 2007年12月15日 土曜日 10:27 AM に ライブラリ カテゴリーに公開されました。 この投稿へのコメントは RSS 2.0 フィードで購読することができます。 現在コメント、トラックバックともに受け付けておりません。

コメントは受け付けていません。