canvasでのピクセル操作について自分メモとか〜

プログラミング canvas

とある作業でピクセル操作が必要になったので。
とりあえず自分用に図とベースとなるプログラムを。

2012-08-29 配色チェックツールとか〜 - w7工廠に下記コードを改良して使っています

<!DOCTYPE HTML>
<html>
	<head>
	<style>canvas{background-color:#ccc;}</style>
	<script>
	function main(){
		var image=new Image();
		image.src="1.png";
		image.onload=function(){
			var canvas=document.getElementsByTagName('canvas')[0];
			var ctx=canvas.getContext('2d');
			// 変換前
			var input_w=image.width;
			var input_h=image.height;
			canvas.width=input_w;
			canvas.height=input_h;
			ctx.drawImage(image,0,0);
			var input=ctx.getImageData(0,0,input_w,input_h);
			// 変換後
			var output_w=input_w;//in-outでサイズが同じ場合
			var output_h=input_h;
			var output=ctx.createImageData(output_w,output_h);
			//x方向y方向１ピクセルごとに処理,※変更後のx,yでループを回す）
			for(var output_y=0;output_y<output_h;output_y++){
				for(var output_x=0;output_x<output_w;output_x++){
					//in-outでサイズが同じ場合（拡縮などの場合はこの式がかわってくる）
					var input_x=output_x;
					var input_y=output_y;
					//座標に対する色情報の先頭(RGBAのRの位置)を取得
					var input_rgba=(input_y*input_w+input_x)*4;
					var output_rgba=(output_y*output_w+output_x)*4;
					//R→G→Bと３回処理
					for(var rgb=0;rgb<3;rgb++){
						var color=input.data[input_rgba+rgb];
                                        //--------------------------------------------------
						//rgbaに対しての処理をここに記述
						color=255-color;  //たとえば色反転
                                        //--------------------------------------------------
						output.data[output_rgba+rgb]=color;
					}
					//透明Aはそのまま(変化させたい場合は上のループのrgb<4にする)
					output.data[output_rgba+3]=input.data[input_rgba+3];
				}
			}
			//canvasクリア・変更後のサイズに設定
			ctx.clearRect(0,0,canvas.width,canvas.height);
			canvas.width=output_w;
			canvas.height=output_h;
			ctx.putImageData(output,0,0);
		}
	}
	</script>
	</head>
	<body onload="main()">
		<canvas></canvas>
	</body>
</html>