HTML5のCanvasのある一部分のコントラストを変える

HTML5のCanvasのある一部分のコントラストを変える

HTML5のCanvasのある一部分のコントラストを変える : デモ

HTML5のCanvasのある一部分のコントラストを変える : 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

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', eventShipLoaded, false);

	function eventShipLoaded()
	{
		//変数の定義
		var offsetX = 0,
		offsetY = 0;
		
		//MVCデザインパターンの宣言
		//function View(){}; //外観の処理を行うオブジェクトのグループ
		//function Controller(){}; //インタラクティブな制御を行なうオブジェクトのグループ
		//function Model(){}; //ロジックの処理を行うオブジェクトのグループ
		
		//視覚の処理を行うオブジェクトのグループ
		View =
		{
			//空のinit関数を作る
			init : function()
			{

			}
		}
		
		//Viewの中の関数(init)にプロトタイプの変数や関数を定義します
		//プロトタイプには、インスタンスで使う共有の関数や変数を設定します
		View.init.prototype.view = function()
		{
			//drawImage("画像", 元のイメージのx位置, 元のイメージのy位置, 元のイメージの幅, 元のイメージの高さ
			//コピーするCanvasのx位置, コピーするCanvasのy位置, コピーするCanvasの幅コピーするCanvasの高さ);
			ctx.drawImage(image, 0, 0, 402, 599, 0, 0, 402, 599);
			Model.init.prototype.getData();
		}
		
		//ロジックの処理を行うオブジェクトのグループ
		Model = 
		{
			//空のinit関数を作る
			init: function()
			{

			}
		}
				
		//Modelの中の関数(init)にプロトタイプの変数や関数を定義します
		//プロトタイプには、インスタンスで使う共有の関数や変数を設定します
		Model.init.prototype.ready = function()
		{
			//Canvasのエレメント要素を変数に代入する
			theCanvas = document.getElementById("viewArea");

			//Canvasタグで2次元描画を行ないます
			ctx = theCanvas.getContext("2d");
			
			//Canvasの中心座標を取得
			//centerX: Canvasタグの横幅の1/2を取得
			offsetX = (theCanvas.currentStyle || document.defaultView.getComputedStyle(theCanvas,'')).width;
			offsetX = Number(offsetX.replace('px',''));
			centerX =  offsetX / 2;
			
			//centerY: Canvasタグの高さの1/2を取得
			offsetY = (theCanvas.currentStyle || document.defaultView.getComputedStyle(theCanvas,'')).height;
			offsetY = Number(offsetY.replace('px',''));
			centerY =  offsetY / 2;
		}

		//画像のカラー値を調べる
		Model.init.prototype.getData = function()
		{
			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;
			//コントラストの式
			/*
			p1 = (p0-128)a+128 //128は0-255の半分の値
			*/
			//画像全体のコントラストを変える
			var contrast = 5;
			//for(var i=0; i<width*height; i+=4)
			for(var y=40; y<170; y++)
			{
				for(var x=50; x<180; x++)
				{
					var i = (x+y*width)*4; //1次元の配列の場所を計算する
					pixel[i+0] = (pixel[i+0] - 128) * contrast + 128; //Rを変える
					pixel[i+1] = (pixel[i+1] - 128) * contrast + 128; //Gを変える
					pixel[i+2] = (pixel[i+2] - 128) * contrast + 128; //Bを変える
				}
			}

			ctx.putImageData(imageData, 0 ,0);
		}
		
		//Modelの中のInit関数のインスタンスを生成
		var model = new Model.init();
		//Model関数のプロトタイプにあるready関数を呼び出します
		model.ready();
		
		//Viewの中のInit関数のインスタンスを生成
		var view = new View.init();
		//View関数のプロトタイプにあるview関数を呼び出します
		view.view();
		
	}
}

参照:HTML5+JavaScriptによる画像・動画像処理入門 第4章 画像全体を処理する 部分的にコントラストを変える p102-107 2014

コメントを残す

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