質問編集履歴

4

修正

2016/02/28 08:20

投稿

th3
th3

スコア38

test CHANGED
@@ -1 +1 @@
1
- for文の間違
1
+ for文がうまくかない
test CHANGED
@@ -1,6 +1,10 @@
1
1
  グレースケールの描画をして、クリック位置からの階調値を求めようとしています。
2
2
 
3
- このときに、grayの値を3*3の正方形に算出したいのですが、ちゃと算出されないです。このfor文のどこが間違っているのか教えてください。
3
+ このときに、grayの値を100*100の正方形の形したいのですが、うまくいきません。このfor文のどこが間違っているのか教えてください。
4
+
5
+ マウスイベントのfor文です。
6
+
7
+ よろしくお願いします。
4
8
 
5
9
  ```Javascript
6
10
 

3

追記

2016/02/28 08:20

投稿

th3
th3

スコア38

test CHANGED
File without changes
test CHANGED
@@ -4,9 +4,113 @@
4
4
 
5
5
  ```Javascript
6
6
 
7
- for (var i = mouseY; i < mouseY+3; i++) {
7
+ //ファイルオープンの際のイベント
8
8
 
9
+ var ofd = document.getElementById("selectfile");
10
+
11
+ ofd.addEventListener("change", function(evt) {
12
+
13
+ //ここに画像データを入力
14
+
15
+ var img = null;
16
+
17
+
18
+
19
+ var file = evt.target.files;
20
+
21
+ var reader = new FileReader();
22
+
23
+
24
+
25
+ //dataURL形式でファイルを読み込む
26
+
27
+ reader.readAsDataURL(file[0]);
28
+
29
+
30
+
31
+ //ファイルの読込が終了した時の処理
32
+
33
+ reader.onload = function(){
34
+
35
+ img = new Image();
36
+
37
+ img.onload = function(){
38
+
39
+ //キャンバスに画像をセット
40
+
41
+ var canvas = document.getElementById('c1');
42
+
43
+ var context = canvas.getContext('2d');
44
+
45
+ var width = img.width;
46
+
47
+ var height = img.height;
48
+
49
+ canvas.width = width;
50
+
51
+ canvas.height = height;
52
+
53
+ context.drawImage(img, 0, 0);
54
+
55
+
56
+
57
+ //フィルター処理
58
+
59
+ var srcData = context.getImageData(0, 0, width, height);
60
+
61
+ var dstData = context.createImageData(width, height);
62
+
63
+ var src = srcData.data;
64
+
65
+ var dst = dstData.data;
66
+
67
+ //RGB値をグレースケール化
68
+
69
+ for (var i = 0; i < height; i++) {
70
+
71
+ for (var j = 0; j < width; j++) {
72
+
73
+ var idx = (j + i * width) * 4;
74
+
75
+ var gray = (src[idx] + src[idx + 1] + src[idx + 2]) / 3;
76
+
77
+ dst[idx] = gray;
78
+
79
+ dst[idx + 1] = gray;
80
+
81
+ dst[idx + 2] = gray;
82
+
83
+ dst[idx + 3] = src[idx + 3];
84
+
85
+ }
86
+
87
+ }
88
+
89
+ context.putImageData(dstData, 0, 0);
90
+
91
+ //マウスイベント
92
+
93
+ canvas.addEventListener('click', function(e){
94
+
95
+ var button = e.target.getBoundingClientRect();
96
+
97
+ var mouseX = e.clientX - button.left;
98
+
99
+ var mouseY = e.clientY - button.top;
100
+
101
+ var context = canvas.getContext('2d');
102
+
103
+ //半透明の四角を描画
104
+
105
+ context.beginPath();
106
+
107
+ context.globalAlpha = 0.2;
108
+
109
+ context.fillRect(mouseX, mouseY, 100, 100);
110
+
111
+ for (var i = mouseY; i < mouseY+100; i++) {
112
+
9
- for (var j = mouseX; j < mouseX+3; j++) {
113
+ for (var j = mouseX; j < mouseX+100; j++) {
10
114
 
11
115
  var idx = (mouseX + mouseY * width) * 4;
12
116
 
@@ -18,11 +122,11 @@
18
122
 
19
123
  dst[idx + 2] = gray;
20
124
 
21
- dst[idx + 3] = src[idx + 3];
125
+ //dst[idx + 3] = src[idx + 3];
22
126
 
23
- document.write(gray);
127
+ document.write(gray+",");
24
128
 
25
- if(j = mouseX+3){
129
+ if( j = mouseX+100){
26
130
 
27
131
  document.write("</br>");
28
132
 
@@ -32,4 +136,16 @@
32
136
 
33
137
  }
34
138
 
139
+ }, false);
140
+
141
+ }
142
+
143
+ //読み込んだ画像ソースを入れる
144
+
145
+ img.src = reader.result;
146
+
147
+ }
148
+
149
+ }, false);
150
+
35
151
  ```

2

大幅修正

2016/02/28 08:16

投稿

th3
th3

スコア38

test CHANGED
@@ -1 +1 @@
1
- クリック座標からピクセル値を求めれな理由
1
+ for文間違
test CHANGED
@@ -1,12 +1,12 @@
1
1
  グレースケールの描画をして、クリック位置からの階調値を求めようとしています。
2
2
 
3
- このときに、grayの値がずっと算出され続けます。このfor文のどこが間違っているのか教えてください。
3
+ このときに、grayの値を3*3の正方形に算出したいのです、ちゃんと算出されないです。このfor文のどこが間違っているのか教えてください。
4
4
 
5
5
  ```Javascript
6
6
 
7
- for (var i = mouseY; i < i+100; i++) {
7
+ for (var i = mouseY; i < mouseY+3; i++) {
8
8
 
9
- for (var j = mouseX; j < j+100; j++) {
9
+ for (var j = mouseX; j < mouseX+3; j++) {
10
10
 
11
11
  var idx = (mouseX + mouseY * width) * 4;
12
12
 
@@ -22,6 +22,12 @@
22
22
 
23
23
  document.write(gray);
24
24
 
25
+ if(j = mouseX+3){
26
+
27
+ document.write("</br>");
28
+
29
+ }
30
+
25
31
  }
26
32
 
27
33
  }

1

大部分を修正

2016/02/28 04:50

投稿

th3
th3

スコア38

test CHANGED
@@ -1 +1 @@
1
- クリック座標のピクセル値を求めれない理由
1
+ クリック座標からのピクセル値を求めれない理由
test CHANGED
@@ -1,129 +1,29 @@
1
- グレースケールの描画をして、クリック位置の階調値を求めようとしています。
1
+ グレースケールの描画をして、クリック位置からの階調値を求めようとしています。
2
2
 
3
- このときに、grayの値がNANとなてしまいます。idxを固定値にする、それらしき値は算出できした
3
+ このときに、grayの値がっと算出され続けこのfor文のどこが間違っているのか教えてください。
4
-
5
- これは、クリックのプログラムが間違っているということでしょうか?
6
-
7
- 私はこれ以外にプログラムが思いつかないため、投稿させて頂きました。
8
4
 
9
5
  ```Javascript
10
6
 
11
- //ファイルオープンの際のイベント
7
+ for (var i = mouseY; i < i+100; i++) {
12
8
 
13
- var ofd = document.getElementById("selectfile");
9
+ for (var j = mouseX; j < j+100; j++) {
14
10
 
15
- ofd.addEventListener("change", function(evt) {
11
+ var idx = (mouseX + mouseY * width) * 4;
16
12
 
17
- //ここに画像データを入力
13
+ var gray = (src[idx] + src[idx + 1] + src[idx + 2]) / 3;
18
14
 
19
- var img = null;
15
+ dst[idx] = gray;
20
16
 
21
- var file = evt.target.files;
17
+ dst[idx + 1] = gray;
22
18
 
23
- var reader = new FileReader();
19
+ dst[idx + 2] = gray;
24
20
 
25
- //dataURL形式でファイルを読み込む
21
+ dst[idx + 3] = src[idx + 3];
26
22
 
27
- reader.readAsDataURL(file[0]);
23
+ document.write(gray);
28
24
 
29
- //ファイルの読込が終了した時の処理
30
-
31
- reader.onload = function(){
32
-
33
- img = new Image();
34
-
35
- img.onload = function(){
36
-
37
- //キャンバスに画像をセット
38
-
39
- var canvas = document.getElementById('c1');
40
-
41
- var context = canvas.getContext('2d');
42
-
43
- var width = img.width;
44
-
45
- var height = img.height;
46
-
47
- canvas.width = width;
48
-
49
- canvas.height = height;
50
-
51
- context.drawImage(img, 0, 0);
52
-
53
-
54
-
55
- //フィルター処理
56
-
57
- var srcData = context.getImageData(0, 0, width, height);
58
-
59
- var dstData = context.createImageData(width, height);
60
-
61
- var src = srcData.data;
62
-
63
- var dst = dstData.data;
64
-
65
- //RGB値をグレースケール化
66
-
67
- for (var i = 0; i < height; i++) {
68
-
69
- for (var j = 0; j < width; j++) {
70
-
71
- var idx = (j + i * width) * 4;
72
-
73
- var gray = (src[idx] + src[idx + 1] + src[idx + 2]) / 3;
74
-
75
- dst[idx] = gray;
25
+ }
76
-
77
- dst[idx + 1] = gray;
78
-
79
- dst[idx + 2] = gray;
80
-
81
- dst[idx + 3] = src[idx + 3];
82
26
 
83
27
  }
84
28
 
85
- }
86
-
87
- context.putImageData(dstData, 0, 0);
88
-
89
- //マウスイベント
90
-
91
- canvas.addEventListener('click', function(e){
92
-
93
- var button = e.target.getBoundingClientRect();
94
-
95
- var mouseX = e.clientX - button.left;
96
-
97
- var mouseY = e.clientY - button.top;
98
-
99
- var context = canvas.getContext('2d');
100
-
101
- //半透明の四角を描画
102
-
103
- context.beginPath();
104
-
105
- context.globalAlpha = 0.2;
106
-
107
- context.fillRect(mouseX, mouseY, 100, 100);
108
-
109
- //grayの値を算出
110
-
111
- var idx = (mouseX + mouseY * width) * 4;
112
-
113
- var gray = (src[idx] + src[idx + 1] + src[idx + 2]) / 3;
114
-
115
- console.log(gray);
116
-
117
- }, false);
118
-
119
- }
120
-
121
- //読み込んだ画像ソースを入れる
122
-
123
- img.src = reader.result;
124
-
125
- }
126
-
127
- }, false);
128
-
129
29
  ```