質問編集履歴
1
プログラムの追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -28,55 +28,51 @@
|
|
|
28
28
|
|
|
29
29
|
<html lang="ja">
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
<head>
|
|
32
|
-
|
|
32
|
+
|
|
33
|
-
|
|
33
|
+
<meta charset="utf-8">
|
|
34
|
+
|
|
34
|
-
|
|
35
|
+
<meta http-equiv="Content-Language" content="ja">
|
|
36
|
+
|
|
35
|
-
|
|
37
|
+
<title>Chroma key</title>
|
|
36
|
-
|
|
38
|
+
|
|
37
|
-
|
|
39
|
+
</head>
|
|
38
|
-
|
|
40
|
+
|
|
39
|
-
|
|
41
|
+
<body>
|
|
40
|
-
|
|
42
|
+
|
|
41
|
-
|
|
43
|
+
<div id="screen">
|
|
42
|
-
|
|
44
|
+
|
|
43
|
-
|
|
45
|
+
<canvas id="c" width="480" height="270"></canvas>
|
|
44
|
-
|
|
46
|
+
|
|
45
|
-
|
|
47
|
+
</div>
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
48
|
+
|
|
49
|
-
|
|
49
|
+
<div>
|
|
50
|
-
|
|
50
|
+
|
|
51
|
-
|
|
51
|
+
<video id="v2" width="480px" height="270px" autoplay src="../movie/m1.mp4" loop ></video>
|
|
52
|
-
|
|
52
|
+
|
|
53
|
-
|
|
53
|
+
<span>不透明度</span>
|
|
54
|
-
|
|
54
|
+
|
|
55
|
-
|
|
55
|
+
<input type="range" id="opacity1" min="0" max="100" step="1" >
|
|
56
|
-
|
|
56
|
+
|
|
57
|
-
|
|
57
|
+
<span id="opacityvalue1"></span>
|
|
58
|
-
|
|
58
|
+
|
|
59
|
-
|
|
59
|
+
</div>
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
60
|
+
|
|
63
|
-
|
|
61
|
+
<script type="text/javascript" >
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
62
|
+
|
|
67
|
-
|
|
63
|
+
var video = document.getElementById("v2");
|
|
68
64
|
|
|
69
65
|
var canvas = document.getElementById("c");
|
|
70
66
|
|
|
71
67
|
var context = canvas.getContext('2d');
|
|
72
68
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
69
|
+
//opacity値の出力
|
|
70
|
+
|
|
76
|
-
|
|
71
|
+
opacity1.oninput = e => opacityvalue1.textContent = opacity1.value;
|
|
72
|
+
|
|
77
|
-
// r,g,bというkeyを持ったobjectが第一引数と第二引数に渡される想定
|
|
73
|
+
// r,g,bというkeyを持ったobjectが第一引数と第二引数に渡される想定
|
|
78
|
-
|
|
74
|
+
|
|
79
|
-
function getColorDistance(rgb1, rgb2) {
|
|
75
|
+
function getColorDistance(rgb1, rgb2) {
|
|
80
76
|
|
|
81
77
|
// 三次元空間の距離が返る
|
|
82
78
|
|
|
@@ -96,6 +92,14 @@
|
|
|
96
92
|
|
|
97
93
|
function draw() {
|
|
98
94
|
|
|
95
|
+
//グラフィックをクリア
|
|
96
|
+
|
|
97
|
+
context.clearRect(0, 0, canvas.width, canvas.height);
|
|
98
|
+
|
|
99
|
+
//opacity(alpha)値を設定
|
|
100
|
+
|
|
101
|
+
context.globalAlpha = opacity1.value/100;
|
|
102
|
+
|
|
99
103
|
context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
100
104
|
|
|
101
105
|
// ここでクロマキー処理をする
|
|
@@ -106,32 +110,20 @@
|
|
|
106
110
|
|
|
107
111
|
};
|
|
108
112
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
// Canvasから描画内容を保持するimageDataを取得する。
|
|
112
|
-
|
|
113
|
-
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
// 消す色と閾値
|
|
113
|
+
// 消す色と閾値
|
|
118
|
-
|
|
114
|
+
|
|
119
|
-
var chromaKeyColor = {r: 0, g: 0, b: 0},
|
|
115
|
+
var chromaKeyColor = {r: 0, g: 0, b: 0},
|
|
120
|
-
|
|
116
|
+
|
|
121
|
-
colorDistance = 30;
|
|
117
|
+
colorDistance = 30;
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
118
|
+
|
|
125
|
-
// クロマキー処理
|
|
119
|
+
// クロマキー処理
|
|
126
|
-
|
|
120
|
+
|
|
127
|
-
|
|
121
|
+
function chromaKey() {
|
|
128
122
|
|
|
129
123
|
var imageData = context.getImageData(0, 0, canvas.width, canvas.height),
|
|
130
124
|
|
|
131
125
|
data = imageData.data;
|
|
132
126
|
|
|
133
|
-
|
|
134
|
-
|
|
135
127
|
// dataはUint8ClampedArray
|
|
136
128
|
|
|
137
129
|
// 長さはcanvasの width * height * 4(r,g,b,a)
|
|
@@ -142,8 +134,6 @@
|
|
|
142
134
|
|
|
143
135
|
// n から n+4 までが1つのピクセルの情報となる
|
|
144
136
|
|
|
145
|
-
|
|
146
|
-
|
|
147
137
|
for (var i = 0, l = data.length; i < l; i += 4) {
|
|
148
138
|
|
|
149
139
|
var target = {
|
|
@@ -156,8 +146,6 @@
|
|
|
156
146
|
|
|
157
147
|
};
|
|
158
148
|
|
|
159
|
-
|
|
160
|
-
|
|
161
149
|
// chromaKeyColorと現在のピクセルの三次元空間上の距離を閾値と比較する
|
|
162
150
|
|
|
163
151
|
// 閾値より小さい（色が近い）場合、そのピクセルを消す
|
|
@@ -170,12 +158,8 @@
|
|
|
170
158
|
|
|
171
159
|
}
|
|
172
160
|
|
|
173
|
-
|
|
174
|
-
|
|
175
161
|
}
|
|
176
162
|
|
|
177
|
-
|
|
178
|
-
|
|
179
163
|
// 書き換えたdataをimageDataにもどし、描画する
|
|
180
164
|
|
|
181
165
|
imageData.data = data;
|
|
@@ -184,13 +168,11 @@
|
|
|
184
168
|
|
|
185
169
|
};
|
|
186
170
|
|
|
187
|
-
|
|
171
|
+
draw();
|
|
188
172
|
|
|
189
173
|
</script>
|
|
190
174
|
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
</body>
|
|
175
|
+
</body>
|
|
194
176
|
|
|
195
177
|
</html>
|
|
196
178
|
|
|
@@ -225,3 +207,35 @@
|
|
|
225
207
|
};
|
|
226
208
|
|
|
227
209
|
```
|
|
210
|
+
|
|
211
|
+
|
|
212
|
+
|
|
213
|
+
###追加
|
|
214
|
+
|
|
215
|
+
```JavaScript
|
|
216
|
+
|
|
217
|
+
//opacity値の出力
|
|
218
|
+
|
|
219
|
+
opacity1.oninput = e => opacityvalue1.textContent = opacity1.value;
|
|
220
|
+
|
|
221
|
+
(function draw(){
|
|
222
|
+
|
|
223
|
+
//グラフィックをクリア
|
|
224
|
+
|
|
225
|
+
context.clearRect(0, 0, canvas.width, canvas.height);
|
|
226
|
+
|
|
227
|
+
//opacity(alpha)値を設定
|
|
228
|
+
|
|
229
|
+
context.globalAlpha = opacity.value/100;
|
|
230
|
+
|
|
231
|
+
//video映像をcanvas要素に転写
|
|
232
|
+
|
|
233
|
+
context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
234
|
+
|
|
235
|
+
//処理を繰り返す
|
|
236
|
+
|
|
237
|
+
requestAnimationFrame(draw);
|
|
238
|
+
|
|
239
|
+
})
|
|
240
|
+
|
|
241
|
+
```
|