質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.12%

for文がうまくいかない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 970

th3

score 36

グレースケールの描画をして、クリック位置からの階調値を求めようとしています。
このときに、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);
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yamato_hikawa

    2016/02/29 11:50

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

    キャンセル

回答 1

checkベストアンサー

+2

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


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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る