Firefox編:
getImageData()/putImageData()で代用する
FirefoxにはOperaのように setPixel()/getPixel()がありません。代わりに、getImageData()/putImageData()を使ってピクセル値を読み出します。
getImageData()は、指定した座標範囲に含まれるピクセルデータを一括して取得するメソッドです。たとえば、getImageData(0, 5, 20, 30)とすれば座標(0,5)-(20,30)までのピクセル情報がまとめて内部にコピーされます。そこで、getImageData(x,y,1,1)とすれば、X,Y座標の1ピクセル分のデータを取得できます。
getImageData()で取得した色情報は、data配列に以下の順番で格納されます。
0:赤の輝度(0~255)
1:緑の輝度(0~255)
2:青の輝度(0~255)
3:不透明度(0~255)
任意の座標ピクセルの色情報は以下の記述で取得できます。
imagePixelData = context.getImageData(x, y, 1, 1).data;
R = imagePixelData[0];
G = imagePixelData[1];
B = imagePixelData[2];
続いて、任意の座標にピクセルを描画してみましょう。putImageData()は、指定された画像データを任意の座標に表示するメソッドです。putImageData()で表示する画像は、createImageData()を使って作成します。createImageData()の引数は、(1)横幅、(2)縦幅、の2つで、createImageData(1,1)とすれば1ピクセルの画像が用意されます。
createImageData()で生成した画像オブジェクトには、色情報を格納しているdata配列があります。このdata配列はgetImageData()のdataとまったく同じです。つまり、createImageData()で生成した画像オブジェクトのdata配列に色情報を設定すれば、任意の色でピクセルを描画できるわけです。
実際のプログラムがサンプル3です。画像データが読み込まれていないとキャンバスには何も表示されないので、サンプル3ではimgタグを使って画像をあらかじめ読み込ませています。なお、Firefoxの場合、画像が同一ドメイン(同一階層以下)にないとセキュリティエラーとなり表示されません。ファイル名だけの指定ではローカル環境であってもエラーになりますので、Webサーバーにアップロードして動作を確認してください。
【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>ブラウザーでフィルター処理</h1>
<img src="asama.jpg" style="display: none"><br>
<canvas id="myCanvas" width="300" height="169">canvasに対応したブラウザーで実行してください</canvas>
</body>
</html>
【sample.js】
window.onload = function(){
var _canvasW = 300; // 横幅300ピクセル
var _canvasH = 169; // 縦幅169ピクセル
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imgObj = new Image(_canvasW, _canvasH);
imgObj.src = "http://■■■■/●●●●/asama.jpg";
context.drawImage(imgObj, 0, 0);
// フィルター処理
for(var y=0; y<_canvasH; y++){
for(var x=0; x<_canvasW; x++){
var imagePixelData = context.getImageData(x, y, 1, 1).data; // ピクセル値を取得する
var R = imagePixelData[0];
var G = imagePixelData[1];
var B = imagePixelData[2];
R = R * 2;
if (R > 255) R = 255;
G = Math.floor(G / 2);
B = Math.floor(B / 2);
var pixelImage = context.createImageData(1,1);
pixelImage.data = [R, G, B, 255];
context.putImageData(pixelImage, x, y);
}
}
}
■■■■:ドメイン
●●●●:ディレクトリパス