Edge.jsを使う

それでは実際にEdge.jsを使ってみます。ここでは画像をphotoフォルダに、Edge.jsのスクリプトファイルをjsフォルダに入れてあります。また、マスク画像があるmaskフォルダはHTMLファイルと同じ階層にしてあります。

本稿の構成図

まず、<script>タグを使ってEdge.jsファイルを読み込ませます。

<script type="text/javascript" src="js/edge.js"></script>

これでEdge.jsを利用する準備が完了です。それでは実際のHTMLコードを見ていきましょう。 Edge.jsでは<img>タグのclass属性にedgesを指定するだけで画像が加工処理され表示されます。

<img src="photo/001.jpg" class="edges">

photo/001.jpgが実際に表示する実画像になります。この<img>タグは加工処理された後、<canvas>タグなどに置き換えられてしまうため、<img>タグ自体を参照できなくなる点には注意が必要です(<img>タグに割り当てたID名は変更され、<img>タグに割り当てられていたID名が<canvas>タグに割り当てられます）。

Safariでの結果。輪郭の四隅は丸くなっている。

IEでの結果。輪郭の四隅はとがっている。

サンプル01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
        <script type="text/javascript" src="js/edge.js"></script>
        <title>edge.jsサンプル</title>
    </head>
    <body>
    <h1>edge.jsサンプル</h1>
        <div>
            <img src="photo/001.jpg" class="edges" width="192" height="108" alt="富士山">
        </div>
    </body>
</html>

この時点でIEとFirefox / Safari / Operaでは表示される結果が異なっています。ここらへんの違いはEdge.jsのバージョンアップにより解消される可能性もあります。また、以後に解説するオプションはIEでは有効に機能しませんので注意してください。