ライブラリの読み込み

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

本稿での構成図

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

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

プログラムで制御する場合には以下のようにcvi_curl_lib.jsファイルを読み込ませます。

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

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

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

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

サンプル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">
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
        <script type="text/javascript" src="js/curl.js"></script>
        <title>curl.jsサンプル</title>
    </head>
    <body>
    <h1>curl.jsサンプル</h1>
        <div>
            <img src="photo/001.jpg" class="curl" width="192" height="108" alt="富士山">
        </div>
    </body>
 </html>