1up noob: 2017

2017/06/04

【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で自働着色

2017/04/15

Google Earth上に活断層を表示する方法

本記事では、産総研が公開している活断層データベースをGoogle Earth上で表示する方法を紹介します。

注意

・この記事で紹介する方法は産総研が公式に案内している方法ではありません。今後、仕様変更等により使えなくなる可能性があります。
・当方は産総研とは関係のない個人ですので、問い合わせに答えることはできません。自己責任でお願いいたします。

活断層データベースでは、Google Map上で活断層の位置や情報を確認できます。
このデータをGoogle Map上ではなく、Google Earth上で表示したいと思います。

そのために、活断層データベースのソースを読み込んだところ、
https://gbank.gsj.jp/activefault/GMAP/googlemap_kmz.js
にファイルの置き場所等がまとめられていました。

この中から、活断層の位置についてのkmzファイルのURLを探すと、ここでした。
ダウンロードしてGoogle Earthで開くと、「活動セグメント」として表示されます。

以下に、その他のファイルへのリンクの一部をまとめておきます。