JavaScript だけで画像をピクセルデータに変換する

年明けにいろいろやっていた時に JavaScript で画像加工が面白かったので試し続けてます。

基本は画像を読み込まないといけないので、まずは画像を読み込んでピクセルデータに変換する処理を書いてみました。Deferred を使っているので jQuery が必要です。

function loadImageAsync(path) {
    var deferred = $.Deferred();

    var image = new Image();

    image.onload = function () {
        var width = this.width;
        var height = this.height;

        var canvas = document.createElement("canvas");

        canvas.setAttribute("width", width);
        canvas.setAttribute("height", height);

        var context = canvas.getContext("2d");

        context.drawImage(this, 0, 0);

        var imageData = context.getImageData(0, 0, width, height);

        deferred.resolve(imageData);
    };

    image.onerror = function () {
        deferred.reject();
    };

    image.src = path;

    return deferred.promise();
}

基本的な方針としては Canvas を使ってピクセルデータを取得しています。画像の読み込みが非同期なので Deferred を使って使いやすくしました。

実際に使う場合には以下のように書きます。

loadImageAsync("sample.png").done(function (imageData) {
    // imageData.data に RGBA で色データが入っている
});

複数の画像を読み込んでから処理をしたい場合には Deferred なので $.when を使ってあげるだけですね。

$.when(loadImageAsync("first.png"), loadImageAsync("second.png"), loadImageAsync("third.png")).done(function (first, second, third) {
    // 何かする
});

いろんな画像サイズに対応するために Canvas を毎回生成していますが、思ったほど重くなさそうな感じです。