-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
142 lines (121 loc) · 4.31 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
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Image Filter Worker</title>
<style>
body {
background: #ddd;
padding: 10px;
}
#canvas {
border: 2px dashed #aaa;
display:block;
margin: 0 auto;
}
#canvas.over {
background: #ccc;
}
#options {
margin-top: 10px;
text-align: center;
}
#options input {
width: 40px;
}
</style>
<script id="worker" type="javascript/worker">
var filter = function(imageData, iterations) {
var data = imageData.data;
for (var j = 0; j < iterations; j++) {
for (var i = 0; i < data.length; i += 4) {
var num = Math.round(0.21 * data[i] + 0.71 * data[i+1] + 0.07 * data[i+2]);
data[i] = num;
data[i+1] = num;
data[i+2] = num;
data[i+3] = 205 + Math.random() * 50;
}
}
};
self.onmessage = function(e) {
filter(e.data.imagedata, e.data.iterations);
self.postMessage({
'imagedata': e.data.imagedata,
});
}
</script>
<script>
(function() {
var filter = function(imageData, iterations) {
var data = imageData.data;
for (var j = 0; j < iterations; j++) {
for (var i = 0; i < data.length; i += 4) {
var num = Math.round(0.21 * data[i] + 0.71 * data[i+1] + 0.07 * data[i+2]);
data[i] = num;
data[i+1] = num;
data[i+2] = num;
data[i+3] = 205 + Math.random() * 50;
}
}
}
document.addEventListener('DOMContentLoaded', function() {
var canvas = document.getElementById('canvas');
var button = document.getElementById('filter');
var HEIGHT = 408;
var WIDTH = 306;
canvas.height = HEIGHT;
canvas.width = WIDTH;
var c = canvas.getContext('2d');
canvas.addEventListener('dragover', function() {
canvas.classList.add('over');
}, false);
canvas.addEventListener('dragleave', function() {
canvas.classList.remove('over');
}, false);
canvas.addEventListener('drop', function(e) {
e.preventDefault();
var reader = new FileReader();
reader.onload = function(e) {
var dataURL = e.target.result;
var i = new Image();
i.onload = function() {
c.drawImage(i, 0, 0, WIDTH, HEIGHT);
}
i.src = dataURL;
};
reader.readAsDataURL(e.dataTransfer.files[0]);
}, false);
// Handler which doesn't use web workers.
var handler1 = function() {
var imageData = c.getImageData(0, 0, WIDTH, HEIGHT);
var iterations = document.getElementById('iterations').value || 100;
filter(imageData, iterations);
c.putImageData(imageData, 0, 0);
};
// Handler which uses web workers.
var handler2 = function() {
var imageData = c.getImageData(0, 0, WIDTH, HEIGHT);
var iterations = document.getElementById('iterations').value || 100;
var blob = new Blob([document.getElementById('worker').textContent]);
var worker = new Worker(window.webkitURL.createObjectURL(blob));
worker.onmessage = function(e) {
c.putImageData(e.data.imagedata, 0, 0);
}
worker.postMessage({
'imagedata': imageData,
'iterations': iterations
});
};
// Switch which handler to use to change between using workers and not.
button.addEventListener('click', handler1, false);
}, false);
})();
</script>
</head>
<body>
<canvas id="canvas">Canvas is not supported in your browser.</canvas>
<div id="options">
<input type="text" id="iterations" value="100" />
<button id="filter">Filter</button>
</div>
</body>
</html>