Filmed.jsを使う

それでは実際にFilmed.jsを使ってみます。ここでは画像をphotoフォルダに、filmed.jsのスクリプトファイルをjsフォルダに入れてあります。

本稿の構成図

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

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

これでFilmed.jsを利用する準備が完了です。ただし、注意しないといけないのは他のライブラリでページが読み込まれたら処理するタイプのものを併用すると正しく動作しなくなることがあるということです。これは、ページが読み込まれたら処理を行うイベントの定義がFilmed.js(ver 1.01)では、以前のイベントを上書きしてしまうためです(*3)。

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

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

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

サンプル01の実行結果

また、80×80ピクセルよりも小さい画像の場合は加工処理が行われない点にも注意してください。

*3正確に言えばwindow.onloadに直接指定しているため、window.onloadに処理を指定するタイプのライブラリは併用することができません。

サンプル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/filmed.js"></script>
        <title>filmed.jsサンプル</title>
    </head>
    <body>
    <h1>filmed.jsサンプル</h1>
        <div>
            <img src="photo/001.jpg" class="filmed" width="192" height="108" alt="富士山">
        </div>
    </body>
</html>