HTML5とJavascriptを組み合わせてのプログラミングを勉強中
その入門編の備忘録
HTML5＋JavaScriptの例 その５
・ラスター画像を扱う
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML5</title>
<script type="text/javascript">
var picImg = document.createElement("img");
picImg.src ="pic.jpg";
var cvs = document.getElementById("myCanvas");
var cnt = cvs.getContext("2d");
cnt = drawImage(picImage,0,0);
var pixels = cnt.getImageData(0,0,picImg.width,picImg.height);//画像のデータを取得
for(var y = 0;y<pixels.height;y++){
for(var x = 0;x<pixels.width;x++){
//ピクセルデータはRGBAの順で並んでいる
var r = pixels.data[(y*pixels.width + x)*4];//R
var g = pixels.data[(y*pixels.width + x)*4 + 1];//G
var b = pixels.data[(y*pixels.width + x)*4 + 2];//B
var gray = 0.298912 * r + 0.586611*g + 0.114478*b;
pixels.data[(y*pixels.width + x)*4] = gray;
pixels.data[(y*pixels.width + x)*4+1] = gray * 0.7;
pixels.data[(y*pixels.width + x)*4+2] = gray * 0.4;
}
}
cnt.putImageData(pixels,0,0);//配列を画像として描画
</script>
</head>
<body>
<canvas width="800" height="800" id="myCanvas">
</body>
</html>
OpenGLなどと同じく、ラスター形式で、ピクセルごとに画素値が格納されている
順番はRGBA
