カスタムの輪郭形状を指定する

Edge.jsはあらかじめmaskフォルダに用意されているマスク画像だけでなく、独自に用意したマスク画像も指定することができます。ここではAdobe Photoshopを使って以下のように作成しました。表示する部分は透明に、そうでない部分は黒色にします。グレーが濃いほど画像が表示されなくなります。

Adobe Photoshopで画像を作成

次にファイルメニューからWeb用に保存...を選択します。下図に示すウィンドウが表示されます。ここで保存する形式をPNG-24にし「透明部分」にチェックを入れます。あとは保存ボタンを押してマスク画像を保存します。ここでは綺麗にマスクするためPNG形式を使用していますが、輪郭を鮮明に抜きたいのであればGIF形式で作成しても問題ありません。

ここではPNG形式で保存

次にスクリプトで作成したマスク画像のURLを設定します。ここでは5番目(配列要素としては6番目)として以下のように設定します。

<script type="text/javascript"><!--
    mask2load[5] = "masks/8bit/custom.png"; 
// --></script>

これでimask5のクラス名を指定すると作成したカスタムの輪郭が画像に適用されます。

画像の輪郭がカスタマイズされたものになっている

サンプル04

<!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" />
        <title>edge.jsサンプル</title>
        <script type="text/javascript" src="js/edge.js"></script>
        <script type="text/javascript"><!--
            mask2load[5] = "masks/8bit/custom.png"; 
        // --></script>
    </head>
    <body>
    <h1>edge.jsサンプル</h1>
        <div>
            <img src="photo/006.jpg" class="edges imask5" width="384" height="216" alt="向日葵">
        </div>
    </body>
</html>