質問編集履歴
4
修正
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
for文
|
1
|
+
for文がうまくいかない
|
test
CHANGED
@@ -1,6 +1,10 @@
|
|
1
1
|
グレースケールの描画をして、クリック位置からの階調値を求めようとしています。
|
2
2
|
|
3
|
-
このときに、grayの値を
|
3
|
+
このときに、grayの値を100*100の正方形の形に表したいのですが、うまくいきません。このfor文のどこが間違っているのか教えてください。
|
4
|
+
|
5
|
+
マウスイベントのfor文です。
|
6
|
+
|
7
|
+
よろしくお願いします。
|
4
8
|
|
5
9
|
```Javascript
|
6
10
|
|
3
追記
test
CHANGED
File without changes
|
test
CHANGED
@@ -4,9 +4,113 @@
|
|
4
4
|
|
5
5
|
```Javascript
|
6
6
|
|
7
|
-
|
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+
|
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+
|
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
大幅修正
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
for文の間違い
|
test
CHANGED
@@ -1,12 +1,12 @@
|
|
1
1
|
グレースケールの描画をして、クリック位置からの階調値を求めようとしています。
|
2
2
|
|
3
|
-
このときに、grayの値が
|
3
|
+
このときに、grayの値を3*3の正方形に算出したいのですが、ちゃんと算出されないです。このfor文のどこが間違っているのか教えてください。
|
4
4
|
|
5
5
|
```Javascript
|
6
6
|
|
7
|
-
for (var i = mouseY; i <
|
7
|
+
for (var i = mouseY; i < mouseY+3; i++) {
|
8
8
|
|
9
|
-
for (var j = mouseX; 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
大部分を修正
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
クリック座標のピクセル値を求めれない理由
|
1
|
+
クリック座標からのピクセル値を求めれない理由
|
test
CHANGED
@@ -1,129 +1,29 @@
|
|
1
|
-
グレースケールの描画をして、クリック位置の階調値を求めようとしています。
|
1
|
+
グレースケールの描画をして、クリック位置からの階調値を求めようとしています。
|
2
2
|
|
3
|
-
このときに、grayの値が
|
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
|
9
|
+
for (var j = mouseX; j < j+100; j++) {
|
14
10
|
|
15
|
-
|
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
|
-
|
15
|
+
dst[idx] = gray;
|
20
16
|
|
21
|
-
|
17
|
+
dst[idx + 1] = gray;
|
22
18
|
|
23
|
-
|
19
|
+
dst[idx + 2] = gray;
|
24
20
|
|
25
|
-
|
21
|
+
dst[idx + 3] = src[idx + 3];
|
26
22
|
|
27
|
-
|
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
|
-
|
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
|
```
|