HTML5とJavaScriptでモナリザの画像のRGBをグレーに変換する

gray_monalisa

HTML5とJavaScriptでモナリザの画像のRGBをグレーに変換する : デモ

HTML5とJavaScriptでモナリザの画像のRGBをグレーに変換する : ZIPファイル(71kb)

1.HTML

<!doctype html> <!-- 標準モードでWebページをレンダリング -->
<html lang="ja"> <!-- 言語指定付きのhtml要素 -->
	<head> <!-- ヘッダーの指定 HTMLページの生成に必要な情報を記述 -->
		<meta charset="UTF-8"> <!-- Web上の文字エンコーディングの指定 -->
		<title>HTML5のCanvasで作ったグレイスケールのモナリザ</title> <!-- ブラウザの上部ウィンドウのバーに表示されるタイトル -->
        <link href="css/base.css" rel="stylesheet" type="text/css"> <!-- cssファイル(デザインの仕様)の読み込み -->
		<script src="js/base.js"></script> <!-- JavaScriptファイル(制御の仕様)の読み込み -->
	</head>
    <body> <!-- HTMLページのメインコンテンツを示す要素 -->
        <canvas id = "viewArea" width = "402" height = "599"></canvas> <!-- 描画領域 -->
    </body>
</html>

2.CSS

@charset "UTF-8";

body /* bodyのデザイン */
{
	margin:0; /* borderより外側の余白は0 */
	padding:0; /* borderより内側の余白は0 */
	background-color: #fff; /* 背景色は白 */ 
	-webkit-transform:translateZ(0px); /* GPUの機能を使う */
}

#viewArea /* id名「viewArea」が付いたCanvas要素(タグ)のデザイン */
{
	position: absolute; /* 配置方法は絶対値 */
	top: 10px; /* Webのページの上から10ピクセルの位置 */
	left: 10px; /* Webのページの左から10ピクセルの位置 */
	width: 402px; /* 幅は275ピクセル */
	height: 599px; /* 高さは275ピクセル */
	border: 1px solid #000; /* 線は1ピクセルの太さで、実線、色は黒。上下左右に引く */
	background-color: #001968; /*背景色は濃いブルー*/
}

3.JavaScript

人間の目のもつ赤を知覚する錐体、緑を知覚する錐体、青を知覚する錐体の比:3:6:1

輝度値 = 0.3 * R + 0.59 * G + 0.11 * B 人間の目のもつ赤を知覚する錐体、緑を知覚する錐体、青を知覚する錐体の比:3:6:1

base.js

window.addEventListener("load", init, false);

function init()
{
	var image = new Image();
	image.src = "images/Mona_Lisa,_by_Leonardo_da_Vinci.jpg";
	image.addEventListener('load', eventImageLoaded, false);

	function eventImageLoaded()
	{		
		//Canvasのエレメント要素を変数に代入する
		theCanvas = document.getElementById("viewArea");

		//Canvasタグで2次元描画を行ないます
		ctx = theCanvas.getContext("2d");

		//drawImage("画像", 元のイメージのx位置, 元のイメージのy位置, 元のイメージの幅, 元のイメージの高さ
		//コピーするCanvasのx位置, コピーするCanvasのy位置, コピーするCanvasの幅コピーするCanvasの高さ);
		ctx.drawImage(image, 0, 0, 402, 599, 0, 0, 402, 599);

		var imageData = ctx.getImageData(0,0,image.width, image.height);
		var width = imageData.width;
		var height = imageData.height;
		var pixel = imageData.data; // 型付き配列(符号のない8ビットの整数配列、値を近似値に置き換える):Uint8ClampedArray
		var length = imageData.data.length;
		var gray = [];

		//拡散処理
		for(var y=0; y<height; y++)
		{
			for(var x=0; x<width; x++)
			{
				var i = (x+y*width)*4;
				var r = pixel[i+0]; //R
				var g = pixel[i+1]; //G
				var b = pixel[i+2]; //B

				//輝度値 = 0.3 * R + 0.59 * G + 0.11 * B
				//人間の目のもつ赤を知覚する錐体、緑を知覚する錐体、青を知覚する錐体の比:3:6:1
				pixel[i/4]=0.30*r+0.59*g+0.11*b;

				gray[i+0] = pixel[i/4]; //R
				gray[i+1] = pixel[i/4]; //G
				gray[i+2] = pixel[i/4]; //B
				gray[i+3] = pixel[i+3]; //A
			}
		}
		imageData.data.set(gray); //imageDataに結果を設定する
		ctx.putImageData(imageData, 0 ,0); //画像の描画
	}
}

参考文献:HTML5+JavaScriptによる画像・動画処理入門 松田晃一著 カットシステム 第5章グレースケー化処理 p114-p124

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です