Instant.jsを使う

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

本稿の配置図

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

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

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

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

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

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

サンプル01の実行結果

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

サンプル01

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