2011年09月18日

HTML5のcanvas画像のピクセル操作

言語: HTML5、JavaScript
ブラウザ: Firefox 6.0.2
OS: Mac OS X 10.5.6

HTML5ではcanvas画像のピクセル列を書き換えることができます。

画素のRGBAの値をJavaScriptで読み書きすることで実現します。

1. 基本的な流れ

ピクセル値を書き換える操作の基本的な流れは以下のようになります。
  1. ImageDataオブジェクトの取得
  2. 画素データ列への書き込み
  3. canvasのコンテキストへ反映

2. ImageDataオブジェクト

canvasのピクセル値を操作するにはImageDataオブジェクトを利用します。このオブジェクトのプロパティを書き換えることで、ピクセル列を書き換えます。

ImageDataオブジェクトは以下のプロパティを持ちます。
  • width 画像の幅
  • height 画像の高さ
  • data 画素データの1次元配列。RGBAの順番で値が格納される。
ピクセル列を書き換える場合、dataプロパティを書き換えます。

dataプロパティは、画素値を格納する1次元配列です。画像の左上からR(赤)、G(緑)、B(青)、A(不透明度)の順番に画素の値が並んでいます。

3. getImageData(x, y, width, height)

canvasの(x, y)から幅width、高さheightの領域をImageDataオブジェクトとして取得します。
canvasのコンテキストからImageDataオブジェクトを取得するために、getImageDataメソッドを使います。

4. putImageData(imagedata, x, y)

ImageDataオブジェクトをcanvasのコンテキストに反映させます。反映させるcanvas上の位置を(x, y)で指定します。
※getImageDataで取得したオブジェクトのピクセルを書き換えても、このメソッドで反映させるまでは、canvasには反映されません。

5. サンプル

縦横100pxの画素を全て赤にした例です。
<!DOCTYPE html>
<html>
    <head>
        <title>pixel</title>
        <script type="text/javascript">
        <!--
            window.onload = function() {
                var canvas = document.getElementById("canvas");
                var context = canvas.getContext("2d");

                var image = context.getImageData(0, 0, 100, 100);

                for (var i = 0; i < image.height; i++) {
                    for (var j = 0; j < image.width; j++) {
                        image.data[(i * image.width + j) * 4 + 0] = 255;
                        image.data[(i * image.width + j) * 4 + 1] = 0;
                        image.data[(i * image.width + j) * 4 + 2] = 0;
                        image.data[(i * image.width + j) * 4 + 3] = 255;
                    }
                }

                context.putImageData(image, 0, 0);
            }
        -->
        </script>
    </head>
    <body>
        <canvas id="canvas" width="100" height="100"></canvas>
    </body>
</html>

以下は実行結果です。
pixel


HTML5でformをsubmitする方法

言語: HTML5、PHP 5.2.15
ブラウザ: Firefox 6.0.2
OS: Mac OS X 10.5.6

input要素のtypeにsubmitを指定すると、フォーム送信のボタンになるのですが、HTML5ではmethodやactionをinput要素の属性として指定できるようになりました。

つまり、1つのフォームで複数のURLへの対応ができるようになりました。

「このボタンを押すとこのURL、あのボタンを押すとあのURL」といったことができます。

1. メソッドとURLの指定

input要素に以下の属性を指定します。
  • formmethod 送信時のメソッド(POST or GET)
  • formaction 送信先のURL


2. サンプル

まずは、クライアント側のコードです。
POSTボタンを押すとpost.phpが呼ばれて、GETボタンを押すとget.phpが呼ばれます。
<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Submit</title>
    </head>
    <body>
        <form>
            <input type="submit" value="POST" formmethod="post" formaction="/post.php">
            <input type="submit" value="GET" formmethod="get" formaction="/get.php">
        </form>
    </body>
</html>

次はサーバ側のコードです。
以下はpost.phpです。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>POST</title>
    </head>
    <body>
    <?php echo 'POSTメソッド'; ?>
    </body>
</html>
POSTボタンを押すと、post.phpが処理されて、「POSTメソッド」と表示されます。

以下はget.phpです。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>POST</title>
    </head>
    <body>
    <?php echo 'GETメソッド'; ?>
    </body>
</html>
GETボタンを押すと、get.phpが処理されて、「GETメソッド」と表示されます。

2011年09月17日
2011年09月16日

HTML5のformでinput要素の入力値チェック

言語: HTML5、JavaScript
ブラウザ: Firefox 6.0.1
OS: Mac OS X 10.5.6

HTML5ではフォーム要素の入力値チェックができます。

やり方はinput要素に属性を追加して、JavaScriptでチェック用のメソッドを呼ぶだけです。

1. 指定する属性

  • required 入力必須
  • pattern 入力値を正規表現で指定
  • maxLength 最大入力文字数
  • min 最小値
  • max 最大値
  • step この値の倍数を許容するということかも?
試してみたところ、requiredとpatternとmaxLengthは使えるようです。他の属性は未実装なのかどうか知りませんが、使えませんでした(使い方が間違っていたらごめんなさい)。
あと、stepですが、公式ドキュメントを読みましたが、正直よくわかりませんでした。
maxLengthは入力の際に制限がかかり、指定した文字数より多くの文字は入力できません。

2. checkValidityメソッド

form要素のcheckValidityメソッドを呼ぶと、入力値のチェックを明示的に行えます。入力チェックに合格ならtrue、そうでなければfalseを返します。
入力値のチェック自体は、このメソッドを呼ばなくてもinput要素からフォーカスが失われたタイミングで行われるようです。チェックに引っかかるとinput要素の枠が赤くなります。

3. サンプル

requiredとpatternを指定したinput要素を含むformを作成して、「入力値チェック」ボタンでチェックを行います。
<!DOCTYPE html>
<html>
    <head>
        <title>Validate</title>
        <script type="text/javascript">
        <!--
            function validate() {
                var f = document.getElementById("form");

                if ( f.checkValidity() ) {
                    alert("正しい入力です");
                } else {
                    alert("間違った入力です");
                }
            }
        -->
        </script>
    </head>
    <body>
        <form id="form">
            required:<input type="text" name="value1" required><br>
            pattern:<input type="text" name="value2" pattern="[0-9]">
        </form>

        <button onclick="validate()">入力値チェック</button>
    </body>
</html>


2011年09月15日

HTML5のcanvasに画像を表示

言語:HTML5, JavaScript
ブラウザ:Firefox 6.0.1

HTML5のcanvas要素ですが、画像を表示させることも出来ます。

使用するメソッドはdrawImageです。

drawImageには引数の異なる3種類のメソッドが存在します。

drawImage(image, dx, dy)

元画像をcanvas上の(dx, dy)に描画します。

drawImage(image, dx, dy, dw, dh)

元画像をcanvas上の(dx, dy)に幅dw、高さdhの大きさに拡大縮小して描画します。

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

元画像の(sx, xy)から幅sw、高さshを切り取って、canvas上の(dx, dy)に幅dw、高さdhになるよう拡大縮小して描画します。

3つのメソッドの引数imageにはimg要素かvideo要素かcanvas要素が指定できます。

以下サンプルです。
<!DOCTYPE html>
<html>
    <head>
        <title>canvas</title>
        <script type="text/javascript">
        <!--
            window.onload = function() {
                var saboten = document.getElementById("saboten");
                var canvas1 = document.getElementById("canvas1");
                var context1 = canvas1.getContext("2d");

                context1.drawImage(saboten, 0, 0);

                var canvas2 = document.getElementById("canvas2");
                var context2 = canvas2.getContext("2d");

                context2.drawImage(canvas1, 0, 0);

                var canvas3 = document.getElementById("canvas3");
                var context3 = canvas3.getContext("2d");

                context3.drawImage(saboten, 0, 0, 50, 50);

                var canvas4 = document.getElementById("canvas4");
                var context4 = canvas4.getContext("2d");

                context4.drawImage(saboten, 0, 0, 50, 50, 0, 0, 100, 100);
            }
        -->
        </script>
    </head>
    <body>
        <div>この画像はimg要素の画像</div>
        <img id="saboten" src="./saboten.jpg" /><br />
        <div>この画像はimg要素を描画した画像</div>
        <canvas id="canvas1" width="100px" height="100px"></canvas>
        <div>この画像は上のcanvas要素を描画した画像</div>
        <canvas id="canvas2" width="100px" height="100px"></canvas>
        <div>この画像はimg要素を縦横1/2に縮小した画像</div>
        <canvas id="canvas3" width="100px" height="100px"></canvas>
        <div>この画像はimg要素の左上1/4を切り取って縦横2倍にした画像</div>
        <canvas id="canvas4" width="100px" height="100px"></canvas>
    </body>
</html>
canvas1にはimg要素の画像をそのまま描画しています。
canvas2にはcanvas1の画像をそのまま描画しています。
canvas3にはimg要素の画像を縦横1/2にして描画しています。
canvas4にはimg要素の左上から縦横それぞれ50px(半分)切り取ってものを縦横100pxに拡大(2倍)して描画しています。

img要素の./saboten.jpgは以下の画像です。
saboten


canvasはもっといろいろなことができるので、記事も増えそうです。



生活習慣病が気になる方に
お勧めのモニターがあります。