グレースケールで描画する

範囲選択された画像をトリミングして、そのトリミングした画像をグレースケールで表示したいのですが、良い方法を知っている方教えてください。
いろんなサイトを見て回って、試したのですがカラーの状態で表示されてしまいます。
また、参考になるサイトなどがありました、教えてください。
以下に今できているソースをおいて置きます。

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" />  <title>sub</title> <img id="aaa" src="/sub/first.jpg" height="500">

<script type="text/javascript">  
var x=0;
var y=0;

(function (){
//elementをid="aaa"に設定
var element = document.getElementById("aaa");
//マウスを押すたびに実行される関数
function MouseDownFunc(event){
    //右ボタンのみ反応
    if(event.button == 0){
	console.log(event.x,event.y);
	x=event.x;
	y=event.y;
}}
// イベントリスナーに対応している
if(element.addEventListener){
    // マウスのボタンを押すと実行されるイベント
	element.addEventListener("mousedown" , MouseDownFunc);
// アタッチイベントに対応している
}else if(element.attachEvent){
    // マウスのボタンを押すと実行されるイベント
	element.attachEvent("onmousedown" , MouseDownFunc);
}})();
//クリックした時に実行する
onclick = function() {
draw();};
function draw() {
//"c1"から要素を取得する
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
//Imageオブジェクトを生成
var img = new Image();
//元になる画像
img.src = "/sub/first.jpg?";
//画像が読み込まれるのを待ってから処理を続行 
img.onload = function() {
//img.srcの指定座標を表示
ctx.drawImage(img, x, y, 500, 300, 80, 60, 300, 200);}

}
</script>

</head> <body>

</body> </html>

行動規範の内容に同意します

回答1件

ベストアンサー

もう少し効率のいい方法があると思うのですが・・・。
取あえず力づくでやる方法です。
ご参考まで。

長くなるのでグレースケール化だけに処理をはしょっています。
トリミング等は別途組み込んでください。

JavaScript
1<!DOCTYPE HTML>
2<html>
3<head>
4<title>sub</title>
5<script> 
6"use strict";
7
8function run() {
9    //"c1"から要素を取得する 
10    var canvas = document.getElementById('c1'); 
11    
12    if ( ! canvas || ! canvas.getContext ) { return false; } 
13    
14    var ctx = canvas.getContext('2d'); 
15    
16    //Imageオブジェクトを生成 
17    var img = new Image(); 
18    
19  //元になる画像 
20    img.src = "a.jpg"; 
21  
22    //画像が読み込まれるのを待ってから処理を続行  
23    img.onload = function() { 
24	    //img.srcの指定座標を表示 
25    	ctx.drawImage(img, 0,0);
26	    
27        // 元になる画像を取得
28		var input = ctx.getImageData(0, 0, img.width, img.height);
29	    
30    	// 出力先の画像の入れ物
31        var output = ctx.createImageData(img.width, img.height);
32	    
33    	// 元画像を白黒化して出力先画像へ入れる
34        var inputData = input.data;
35        var outputData = output.data;
36        for (var y = 0; y < canvas.height; y += 1) {
37          for (var x = 0; x < canvas.width; x += 1) {
38              var i = (y* canvas.width + x)*4;
39        	  var p = (inputData[i] + inputData[i+1] + inputData[i+2])/3;
40              outputData[i] = p;
41              outputData[i+1] = p;
42              outputData[i+2] = p; 
43              outputData[i + 3] = inputData[i+3]; // alpha
44            }
45        }
46        
47        // 操作後にイメージを描画する
48        ctx.putImageData(output, 500, 0);
49    } 
50}
51</script>
52</head>
53<body onload="run()">
54<canvas id="c1" width="1024" height="1024"></canvas>
55</body>
56</html>