画像からトリミングした範囲をcanvasに描いて、それをグレイスケール化したときの値が知りたいです。そこで、下記のようなプログラムを作成したのですが、値を取得することができません。
理由を教えてください。エラーが出てないので原因がわからないです。
*追記
値を取得することですが、トリミングされたcanvasの(x,y)どこでも良いのでグレイスケール化した値が求めれているかを確かめたいです。
</script> </head> <canvas id="c1" width="1176" height="700"></canvas> </body>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); function get() { //"c1"から要素を取得する var imagedata = ctx.getImageData(img,x,y,500,300); var idata = imagedata.data; //ピクセルデータをidataにセット var num = idata.length; //ピクセルデータ総数を取得 var pix = num / 4; //ピクセル数を取得 for ( var i = 0 ; i < pix ; i++ ) { //赤・緑・青のデータを取得 var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; //グレースケール化する処理 var g = parseInt(( r*30 + g*59 + b*11 ) / 100); //グレースケール化したデータを再セット idata[ i*4 ] = g; idata[ i*4 + 1 ] = g; idata[ i*4 + 2 ] = g; } console.log(idata[50]); }}}