for文がうまくいかない

Question

グレースケールの描画をして、クリック位置からの階調値を求めようとしています。
このときに、grayの値を100*100の正方形の形に表したいのですが、うまくいきません。このfor文のどこが間違っているのか教えてください。
マウスイベントのfor文です。
よろしくお願いします。

//ファイルオープンの際のイベント
var ofd = document.getElementById("selectfile");
ofd.addEventListener("change", function(evt) {
    //ここに画像データを入力
    var img = null;
 
    var file = evt.target.files;
    var reader = new FileReader();
 
    //dataURL形式でファイルを読み込む
    reader.readAsDataURL(file[0]);
 
    //ファイルの読込が終了した時の処理
    reader.onload = function(){
        img = new Image();
        img.onload = function(){
                //キャンバスに画像をセット
        var canvas = document.getElementById('c1');
        var context = canvas.getContext('2d');
        var width = img.width;
        var height = img.height;
        canvas.width = width;
        canvas.height = height;
        context.drawImage(img, 0, 0);

        //フィルター処理
        var srcData = context.getImageData(0, 0, width, height);
        var dstData = context.createImageData(width, height);
        var src = srcData.data;
        var dst = dstData.data;
        //RGB値をグレースケール化
        for (var i = 0; i < height; i++) {
            for (var j = 0; j < width; j++) {
                var idx = (j + i * width) * 4;
                var gray = (src[idx] + src[idx + 1] + src[idx + 2]) / 3;
                dst[idx] = gray;
                dst[idx + 1] = gray;
                dst[idx + 2] = gray;
                dst[idx + 3] = src[idx + 3];
            }
        }
        context.putImageData(dstData, 0, 0);
        //マウスイベント
        canvas.addEventListener('click', function(e){
	        var button = e.target.getBoundingClientRect();
	        var mouseX = e.clientX - button.left;
	        var mouseY = e.clientY - button.top;
	        var context = canvas.getContext('2d');
	        //半透明の四角を描画
            context.beginPath();
            context.globalAlpha = 0.2;
            context.fillRect(mouseX, mouseY, 100, 100);
            for (var i = mouseY; i < mouseY+100; i++) {
            	for (var j = mouseX; j < mouseX+100; j++) {
            		var idx = (mouseX + mouseY * width) * 4;
            		var gray = (src[idx] + src[idx + 1] + src[idx + 2]) / 3;
            		dst[idx] = gray;
            		dst[idx + 1] = gray;
            		dst[idx + 2] = gray;
            		//dst[idx + 3] = src[idx + 3];
            		document.write(gray+",");
            		if( j = mouseX+100){
            			document.write("</br>");
            		}
            	}
            }
	    }, false);
        }
        //読み込んだ画像ソースを入れる
        img.src = reader.result;
    }
}, false);

Comments

[yamato_hikawa]

問題があるのはJSだと思いますが、HTMLコードも書いていただけないでしょうか。

Answer 1

if( j = mouseX+100){      // 比較を行いたいなら "==" 等の比較演算子に変更すべきです
  document.write("</br>");
}

さらっと見てみましたが。。。
2つめの for 文にある if 条件式ですが、ここで j に mouseX+100 を代入している事が原因ではないでしょうか？

値の比較を行いたいなら、比較演算子 "==" を利用すべきですね。

補足：
この if 文はデバッグの為に記載しているのなら良いですが、そうでないなら（for 含めて）処理ロジックを見直す必要があります。
なぜなら、該当箇所を "==" としても、絶対にこの if 文が "真" と判断されることはありえません。
（if 文の条件式が "真" と判断される前に、for 文を抜けてしまいます）