CanvasとJavascriptで画像処理

前回までは、ブラウザ上で3Dモデルを扱うことができるライブラリであるthree.jsについてお伝えしてきました。今回は、少し脱線して、ブラウザ上での二次元画像の処理について書きたいと思います。

タイトルにあるCanvasとは、HTML5で導入された二次元画像を描画するための要素で、Javascriptと組み合わせることで、ブラウザ上でのアニメーション表示や画像の加工など様々なことができます。

MonoMediaでは、数回にわたって、CanvasとJavascriptを用いて、画像ファイルに対してグレイスケールやハーフトーン処理等の様々な画像処理を行う方法についてお伝えしていきたいと思います。(図形の描写やアニメーション等は特に触れません。)今回は、その下準備として、Canvasに画像ファイルを読み込むところまで行いたいと思います。

Canvasの準備

まずcanvasを追加します。canvasはHTMLの要素ですので、他のタグと同様に<body>タグ内に追加します。その際、widthとheight属性で幅と高さをピクセル単位で指定します。(widthとheightはJavascriptからも変更することができますが、今回の連載では512pxに固定したいと思います。)また、Javascriptからcanvas要素にアクセスしやすいように、id属性も指定すると良いと思います。

Javascriptの準備

Javascriptは外部ファイルとして読み込んでも大丈夫ですが、今回は分かりやすいように<head>タグ内に記述します。また、HTMLのDOM要素がすべてロードされてから実行されるように、Javascriptによる処理はinit()と名付けたメソッド内に記述し、そしてinit()メソッドを<body>タグのonload属性に指定します。

Canvasへの画像のロード

本連載では、画像処理を加えるベース画像として、カラフルが分かりやすい弊社製品ごちゃ混ぜ写真を使用したいと思います。ファイル名はmono.jpgとし、コードを記述するindex.htmlと同じフォルダに配置してあります。

以下が、mono.jpgをCanvasへロードするための全コードになります。

まず、documentオブジェクトのgetElementById()メソッドを用いて、「canvas」とIDを付与したcanvas要素を取得します。次にcanvasからcontextオブジェクトを取得します。canvas上の画像の操作を行う場合、通常このcontextを通じて行うことになります。

その次に、Imageオブジェクトを作成し、そのsrcプロパティに画像ファイルのパスを指定することで、画像を読み込むことができます。画像の読み込みには時間がかかるため、非同期で処理が行われ、読み込みが完了するとonloadプロパティに指定した関数が実行されます。(image.onloadはimage.srcの先に来る必要があります。)

最後に、contextのdrawImageメソッドを実行し、引数に指定したImageオブジェクトをcanvasにロードします。第2、3引数には読み込んだ画像を配置するキャンバス上のx座標、y座標を指定できます。

こちらが、今回のコードでロードされた画像です。事前に画像のサイズを512 x 512pxに加工してあったため、キャンバスにぴったり収まりましたが、キャンバスより大きい画像を指定した場合、はみ出した部分はカットされますし、小さい場合は白い余白が表示されると思います。

次回以降は、この画像に対して色々と処理を行っていきたいと思います。


“CanvasとJavascriptで画像処理” への1件の返信

コメントは受け付けていません。