HTML5+JavaScriptで画像処理をするための私の環境構築 - より良いエンジニアを目指して

画像処理を試したいなと思ってました。

以下の本を読んでHTML5+JavaScriptで行うのは良さそうだなと思って、環境構築した時のメモ。

www.cutt.co.jp

C#でデスクトップアプリも考えていたのですが、保守性とか後先考えずに小規模でごちゃごちゃ動かすならば動的型付けのJavaScriptが良いと判断しました。

環境構築

以下の記事のように残念ながらhtmlとpngファイルという最小構成で挑むつもりでしたが、getImageDataなどのメソッドがWebサーバー経由でないとエラーとなってしまいます。(参考サイト)

Chromeに起動引数をつけて実行とか、Visual Studioでのプレビューなどとあるのですが、素直にWebサーバーを構築した方が良さそうです。

今回は、C#のASP.NET CoreのWebアプリケーションを構築することにしました。結局はC#を使うんです。

私が単にC#が得意でVisual Studioに慣れ親しんでいるという理由です。

肝心なのは HTML5で画像処理すればもっとも効率良く画像処理をあれこれできるという目的への最短距離を選ぶべきです。

エンジニアたるもの手段と目的を取り違えるべからず。。。

手順

Visual Studioでプロジェクトを新規作成します。

ASP.NET Core Webアプリケーションを選択します。.NET Frameworkでも良いのですが、特に理由がなければ.NET Coreでしょう。

f:id:rimever:20190627055500p:plain

プロジェクトテンプレートは「Webアプリケーション」で作成します。

f:id:rimever:20190627055923p:plain

Webアプリケーションが構築されました。

f:id:rimever:20190627061325p:plain

とりあえず画像処理

画像ファイルを反転させる画像処理を試してみることにします。

imagesフォルダに画像ファイルを追加します。

f:id:rimever:20190627061308p:plain

Pagesフォルダを右クリックして「追加」-「Razorページ」を選択して「追加」ボタンを押します。

f:id:rimever:20190627061455p:plain

PageModelクラスの作成、レイアウトページを使用するは、不要なのでチェックを外してReverseページを作成します。

ファイルの内容を以下のように書き換えます。

@page
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ピクセルの色に応じて色を変える</title>
    <script>
        function start() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            var image = new Image();
            image.onload = function () {
                context.drawImage(image, 0, 0);
                var imageData = context.getImageData(0, 0, image.width, image.height);
                var pixel = imageData.data;
                var width = 4 * imageData.width;
                var height = imageData.height / 2;
                for (var i = 0; i < width * height; i += 4) {
                    // R,G,Bを反転させる
                    for (var j = 0; j < 3; j++) {
                        pixel[i + j] = 255 - pixel[i + j];
                    }
                }
                context.putImageData(imageData, 0, 0);
            }
            image.src = "../../images/Image.png";
        }
    </script>
</head>
<body onload="start()">
    <canvas id="canvas" width="1920" height="1080">
        Canvasをサポートしたブラウザを使用してください。
    </canvas>
</body>
</html>