-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
54 lines (53 loc) · 1.71 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频</title>
</head>
<body>
<canvas id="canvas" style="background-color: #ccc" width=400 height=225>
</canvas>
<video src="movie3.mp4" style="width: 400px;margin-left: -5000px;position: absolute" controls></video>
<script>
//卷积核后面再研究
// var filter = [[-1,-1,-1],[-1,8,-1],[-1,-1,-1]];
window.onload = function(){
canvas = document.getElementById('canvas');
cobj = canvas.getContext('2d');
video = document.getElementsByTagName('video')[0];
video.play();
video.addEventListener('play', function(){
setInterval(function(){
cobj.drawImage(video, 0, 0, 400, 225);
cobj.putImageData(dealCanvas(),0,0)
}, 20);
});
}
var CHECK_R;// = 30;
var CHECK_G;// = 150;
var CHECK_B;// = 35;
var TOLERANCE = 55
function dealCanvas() {
var frameData = cobj.getImageData(0,0,400,225)
// console.info(frameData)
var len = frameData.data.length/ 4;
for ( var i = 0; i < len; i++) {
var r = frameData.data[i * 4 + 0],
g = frameData.data[i * 4 + 1],
b = frameData.data[i * 4 + 2];
if (CHECK_R == undefined){
CHECK_R = r;
CHECK_G = g;
CHECK_B = b;
}
if ( Math.abs(r - CHECK_R) <= TOLERANCE
&& Math.abs(g - CHECK_G) <= TOLERANCE
&& Math.abs(b - CHECK_B) <= TOLERANCE) {
frameData.data[i * 4 + 3] = 0;
}
}
return frameData
}
</script>
</body>
</html>