-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblur.html
executable file
·125 lines (100 loc) · 3.32 KB
/
blur.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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video Frames</title>
<link rel="stylesheet" href="style.css">
<style>
#movieclip {
display: none;
}
</style>
</head>
<body>
<header>Avoid cross domain security error. $ http-server -p 8000 </header>
<canvas id="canvas" width="600" height="360"></canvas>
<aside>Video file may take a moment to load.</aside>
<video id="movieclip" width="640" height="360" autoplay>
<source src="./assets/movieclip.mp4" type="video/mp4"/>
<source src="./assets/movieclip.webm" type="video/webm"/>
<source src="./assets/movieclip.ogv" type="video/ogg"/>
</video>
<script src="utils.js"></script>
<script src="Stats.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
copyContext = createCopyContext(canvas),
video = document.getElementById('movieclip'),
stats = Stat.initStats();
function createCopyContext (canvas) {
var copy = document.createElement('canvas');
copy.width = canvas.width;
copy.height = canvas.height;
return copy.getContext('2d');
}
(function drawFrame () {
stats.begin();
window.requestAnimationFrame(drawFrame, canvas);
copyContext.drawImage(video, 0, 0);
var imageData = copyContext.getImageData(0, 0, canvas.width, canvas.height),
data = imageData.data,
dataCopy = copyContext.getImageData(0, 0, canvas.width, canvas.height).data;
var kernel = [
[0, 1, 0],
[1, 2, 1],
[0, 1, 0]
];
var weight = 0;
for (var i=0;i<3;i++) {
for (var j=0;j<3;j++) {
weight += kernel[i][j];
}
}
weight = 1 / (weight*2);
var w = canvas.width;
var h = canvas.height;
var w4 = w*4;
var y = h;
do {
var offsetY = (y-1)*w4;
var prevY = (y == 1) ? 0 : y - 2;
var nextY = (y == h) ? y - 1 : y;
var offsetYPrev = prevY*w*4;
var offsetYNext = nextY*w*4;
var x = w;
do {
var offset = offsetY + (x*4-4);
var offsetPrev = offsetYPrev + ((x == 1) ? 0 : x-2) * 4;
var offsetNext = offsetYNext + ((x == w) ? x-1 : x) * 4;
data[offset] = (
(dataCopy[offsetPrev]
+ dataCopy[offset-4]
+ dataCopy[offset+4]
+ dataCopy[offsetNext]) * 2
+ dataCopy[offset] * 4
) * weight;
data[offset+1] = (
(dataCopy[offsetPrev+1]
+ dataCopy[offset-3]
+ dataCopy[offset+5]
+ dataCopy[offsetNext+1]) * 2
+ dataCopy[offset+1] * 4
) * weight;
data[offset+2] = (
(dataCopy[offsetPrev+2]
+ dataCopy[offset-2]
+ dataCopy[offset+6]
+ dataCopy[offsetNext+2]) * 2
+ dataCopy[offset+2] * 4
) * weight;
} while (--x);
} while (--y);
context.putImageData(imageData, 0, 0);
stats.end();
}());
};
</script>
</body>
</html>