ピクセル値を算出できない

Question

画像上でクリックした座標からのピクセル値を求めるプログラムなのですが、値を出すことができません。
原因がわからないです。

var mx,my;
var x,y;
var col = new Array();

window.onload = function () {
    var canvas = document.getElementById("c1");
    var ctx = canvas.getContext("2d");
    var img = new Image();
    var i ;
    img.src = "/test/map.jpg";
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        var src = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var dst = ctx.createImageData(canvas.width, canvas.height);
        for (var y = 0; y < canvas.height; y += 1) {
          for (var x = 0; x < canvas.width; x += 1) {
              var i = (y* canvas.width + x)*4;
              var pixel = (src.data[i] + src.data[i+1] + src.data[i+2]) / 4;
              dst.data[i] = dst.data[i+1] = dst.data[i+2] = pixel;
              dst.data[i+3] = src.data[i+3];
              col[i] = dst.data[i];
              col[i+1] = dst.data[i+1];
              col[i+2] = dst.data[i+2];
              col[i+3] = dst.data[i+3];
            }}
        ctx.putImageData(dst, 0, 0);
    };
    canvas.onmousedown = (function(e) {
    var rect = e.target.getBoundingClientRect();
    mx = e.clientX - rect.left;
    my = e.clientY - rect.top;
    for (var my = 0; my < my+20; my += 1) {
          for (var mx = 0; mx < mx+20; mx += 1) {
              var i = (my* (mx+20) + mx)*4;
              console.log(col[i],col[i+1],col[i+2]);

          }
    }  
});
};

Comments

[shi_ue]

「 ```Javascript 」と「 ``` 」を上下に入れてみてください。見やすくなります。

[shi_ue]

半角で・・・お願いします

[shi_ue]

何度もすみませんが、バッククオートshift+@です。これをコピペしてください。　```

[shi_ue]

おお！見やすくなりました。ありがとうです。

Answer 1

理解できました。白黒にしてるんですね。

//以下修正
        // for (var my = 0; my < my+20; my += 1) { 
        //   for (var mx = 0; mx < mx+20; mx += 1) { 
        //     var i = (my* (mx+20) + mx)*4; 
        //     console.log(col[i],col[i+1],col[i+2]);
        var pos = (my* canvas.width + mx)*4;
        console.log(col[pos],col[pos+1],col[pos+2]);

こういうことじゃないですか？

また、わざわざ白黒にしているなら、colは色と元画像のアルファだけの単純な配列にすれば、1/2にすることができますね。さらにjpgがソースなら、アルファもいらないという・・・

Comments

[th3]

何度もありがとうございます。
やはり、値は出ませんでした。

[shi_ue]

？？
提示していただいたコードを自分のローカル環境でやりましたが、うまくいきましたよ？
もしかしたら、HTMLを直接ブラウザで開いてませんか？
それだとcanvasの制限でうまく行きません。どこかにアップロードするかローカルサーバーを作ってみるといいですよ。

[th3]

ローカルサーバーの立て方を調べたりしたのですが、全然わからなくて...
getimagedataの部分でどうしても引っかかるので、色んな方法を試したりしたのですが、PCについて詳しくないので手詰み状態です。
canvsの制限を受けずに済む方法をどうか教えてください。
お願いします。

[shi_ue]

windowsですよね？macだったらごめんなさい。
ちょっと簡単に、立てる方法を作ってみました。
http://www.jw7.org/2016/02/27/php_built_in_web_server/
チャレンジしてみてください。

[th3]

htmlと同じフォルダに入れている画像が読み込まれないのですが、これはどうしてでしょうか？

[Lhankor_Mhy]

横からですが、
img.src = "/test/map.jpg";
を
img.src = "map.jpg";
にしたらどうなりますでしょうか。

[shi_ue]

Lhankor_Mhyさん、ナイスフォローです！
そうそう、画像のパス間違ってました。

[th3]

ファイルを外部から読み込むことで画像を表示させました！
ただ、RGB値はいまだにnull状態ですが・・・

[shi_ue]

Chromeで実行すると、開発者ツールのコンソールに、

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

というエラーが出ます。
ローカル環境で、ローカルの画像でも出るので、サーバーを立てない限り、どんなに足掻いてもgetImageDataは実行できませんよ。これは仕様です。

[shi_ue]

もう一つ質問を起こしているみたいですけど、どうしてそこまでローカルに拘るんですか？
ローカルで動く何かを作っているんでしょうか？
そうでなければ、開発用にローカルでウェブサーバーを動かしたほうが早いと思いますよ。

では、頑張ってください。