【JavaScript】Canvas上で漫画の自動着色する

「マンガミーヤ」という漫画閲覧用の画像ビューアでは、プラグインによる機能追加が可能で、特に有名なものとして「疑似4色刷り」と呼ばれる漫画を自動で着色する機能があります。
同等の自動着色機能を持つソフトとして、「HSP de 自動着色」が公開されています。

最近流行りのAIによる自動着色とは異なり、画像の輝度に対して場合分けし、4色で塗り分けるといった機能です。（参考：下画像）

今回、これをCanvas上で、再現してみます。
以下は、作成したプログラムのソースコードの一部です。フィルタ処理の部分はもう少しすっきり書ける気がします。

	function filter(src, out) {
	var img = new Image();
	img.src = src;
	img.onload = function() {
	out.outerHTML = "<img src='" + pseudo_color(img) + "'>";
	};
	}
	function pseudo_color(img) {
	//　キャンバスに画像をセットする
	var canvas = document.createElement("canvas");
	var ctx = canvas.getContext("2d");
	canvas.width = img.width;
	canvas.height = img.height;
	ctx.drawImage(img, 0, 0);
	var src = ctx.getImageData(0, 0, img.width, img.height);
	var dst = ctx.createImageData(img.width, img.height);
	// フィルタ処理
	for (var i = 0; i < src.data.length; i = i+4) {
	// 画像のrgbから輝度を算出する
	var luminance = Math.floor(( 0.298912 * src.data[i] + 0.586611 * src.data[i+1] + 0.114478 * src.data[i+2] ));
	// 疑似カラー割り当て
	var red = luminance + 39;
	var green = luminance + 14;
	var blue = luminance - 36;
	if (luminance > 240) {
	red = 255;
	green = 255;
	blue = 255;
	} else if (luminance > 200) {
	} else if (luminance > 150) {
	green -= 50;
	blue -= 50;
	} else if (luminance > 100) {
	red -= 50;
	blue -= 50;
	} else if (luminance > 10) {
	red -= 50;
	green -= 50;
	blue += 100;
	} else {
	red = 0;
	green = 0;
	blue = 0;
	}
	dst.data[i] = Math.max(0, Math.min(255, red));
	dst.data[i+1] = Math.max(0, Math.min(255, green));
	dst.data[i+2] = Math.max(0, Math.min(255, blue));
	dst.data[i+3] = 255;
	}
	// フィルタ処理した画像をキャンバスに吐き出す
	ctx.putImageData(dst, 0, 0);
	// dataURL形式にファイルを変換する
	var dataurl = canvas.toDataURL("image/jpeg");
	return dataurl;
	}

view raw auto_color.js hosted with ❤ by GitHub

テストページ

［参考］JavaScriptで自働着色

JavaScript 自動着色