コメント：HTML5、とても魔法。プログラムはGoogleブラウザでテストされました。興味のある友人は、この記事で説明したHTML5コンポーネントキャンバスを使用して、Image Grayscaleを実装するための特定の手順を参照できます。それがあなたに役立つことを願っています。
新しいHTMLページを作成し、ボディタグ間に追加します
<canvas>グレーフィルター</canvas>
最も単純なJavaScriptスクリプトを追加します
<pre> window.onload = function（）{
var canvas = document.getElementById（ "mycanvas"）;
<span> </span> // todo：ここで何かをしてください
}
Canvasオブジェクトから描画オブジェクトのコンテキストを取得するためのコードは次のとおりです。
var context = canvas.getContext（ "2d"）;
HTMLページに画像を追加するHTMLコードは次のとおりです
<img src = "hanjiaren.jpg" />
HTML IMGオブジェクトから画像オブジェクトを取得するためのJavaScriptコードは次のとおりです。
var image = document.getElementById（ "Imagesource"）;
キャンバスオブジェクトに結果の画像を描画するためのコードは次のとおりです。
context.drawimage（image、0、0）;
Canvasオブジェクトから画像ピクセルデータを取得するためのコードは次のとおりです。
var canvasdata = context.getimagedata（0、0、canvas.width、canvas.height）;
ピクセル値を読み取り、グレースケール計算を実装するためのコードは次のとおりです。
for（var x = 0; x <canvasdata.width; x ++）{
for（var y = 0; y <canvasdata.height; y ++）{
//配列内のピクセルのインデックス
var idx =（x + y * canvasdata.width） * 4;
var r = canvasdata.data [idx + 0];
var g = canvasdata.data [idx + 1];
var b = canvasdata.data [idx + 2];
//グレースケール値を計算します
var grey = .299 * r + .587 * g + .114 * b;
//グレースケール値を割り当てます
canvasdata.data [idx + 0] = gray; //赤いチャネル
canvasdata.data [idx + 1] = gray; //グリーンチャネル
canvasdata.data [idx + 2] = gray; //青いチャネル
canvasdata.data [idx + 3] = 255; //アルファチャネル
//黒い境界線を追加します
if（x <8 || y <8 || x>（canvasdata.width -8）|| y>（canvasdata.height -8））
{
canvasdata.data [idx + 0] = 0;
canvasdata.data [idx + 1] = 0;
canvasdata.data [idx + 2] = 0;
}
}
}
計算グレースケールフォーミュラは灰色です= 0.299×赤色 + 0.578×緑色 + 0.114 *青色
読み取りピクセル値はRGBAで、赤い色、緑色、青色、アルファチャネルを表しています。
処理されたデータは、キャンバスにリロードする必要があります。コードは次のとおりです。
Context.putimagedata（canvasdata、0、0）;
プログラムの最終効果は次のとおりです。
完全なソースコードは次のとおりです。
<html>
<head>
<スクリプト>
window.onload = function（）{
var canvas = document.getElementById（ "mycanvas"）;
var image = document.getElementById（ "Imagesource"）;
// Canvas Deminsionを再サイズします
canvas.width = image.width;
canvas.height = image.height;
// 2Dレンダリングオブジェクトを取得します
var context = canvas.getContext（ "2d"）;
context.drawimage（image、0、0）;
var canvasdata = context.getimagedata（0、0、canvas.width、canvas.height）;
alert（canvasdata.width.toString（））;
alert（canvasdata.height.tostring（））;
//グレーフィルター
for（var x = 0; x <canvasdata.width; x ++）{
for（var y = 0; y <canvasdata.height; y ++）{
//配列内のピクセルのインデックス
var idx =（x + y * canvasdata.width） * 4;
var r = canvasdata.data [idx + 0];
var g = canvasdata.data [idx + 1];
var b = canvasdata.data [idx + 2];
//グレースケール値を計算します
var grey = .299 * r + .587 * g + .114 * b;
//グレースケール値を割り当てます
canvasdata.data [idx + 0] = gray; //赤いチャネル
canvasdata.data [idx + 1] = gray; //グリーンチャネル
canvasdata.data [idx + 2] = gray; //青いチャネル
canvasdata.data [idx + 3] = 255; //アルファチャネル
//黒い境界線を追加します
if（x <8 || y <8 || x>（canvasdata.width -8）|| y>（canvasdata.height -8））
{
canvasdata.data [idx + 0] = 0;
canvasdata.data [idx + 1] = 0;
canvasdata.data [idx + 2] = 0;
}
}
}
Context.putimagedata（canvasdata、0、0）; //座標0,0で
};
</script>
</head>
<body>
<h2> hello world！</h2>
<img src = "hanjiaren.jpg" />
<canvas>グレーフィルター</canvas>
</body>
</html>
コード内のファイルは、表示したい画像ファイルを置き換えることができます
HTML5、とても魔法。プログラムはGoogleブラウザでテストされています。
最後のアドバイス、上記のコードをローカルで実行しようとしないでください。 Googleのセキュリティチェックは、ブラウザから非ドメインファイルの読み取りと書き込みを自動的にブロックします。
Tomcatまたは任意のWebコンテナサーバーに投稿して、Googleブラウザーから効果を表示するのが最善です。