-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
125 lines (125 loc) · 3.7 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
<!doctype html>
<html>
<script>
var HEAP = new ArrayBuffer(16*1024*1024);
var I4 = new Int32Array(HEAP);
var tempptr = 0;
var imageptr = (8*8)<<2;
</script>
<script src="filter.js"></script>
<script src="dct.js"></script>
<script src="dering.js"></script>
<body>
<script>
function rgb2ycbco(inbuf, outbuf, pixels) {
var y, cg, co;
var i = 0;
while (i < pixels) {
y = (inbuf[i*4] + 2 * inbuf[i*4+1] + inbuf[i*4+2])*4;
cg = (-inbuf[i*4] + 2 * inbuf[i*4+1] - inbuf[i*4+2])*4;
co = (inbuf[i*4] - inbuf[i*4+2])*8;
outbuf[i] = y;
outbuf[i+1*pixels] = cg;
outbuf[i+2*pixels] = co;
i = i+1;
}
}
function ycbco2rgb(inbuf, outbuf, pixels) {
var r, g, b, t;
var i = 0;
while (i < pixels) {
t = inbuf[i] - inbuf[i+pixels];
r = t + inbuf[i+2*pixels];
g = inbuf[i] + inbuf[i+pixels];
b = t - inbuf[i+2*pixels];
outbuf[i*4] = r >> 4;
outbuf[i*4+1] = g >> 4;
outbuf[i*4+2] = b >> 4;
i = i+1;
}
}
var quant_table = [
[16, 11, 10, 16, 124, 140, 151, 161],
[12, 12, 14, 19, 126, 158, 160, 155],
[14, 13, 16, 24, 140, 157, 169, 156],
[14, 17, 22, 29, 151, 187, 180, 162],
[18, 22, 37, 56, 168, 109, 103, 177],
[24, 35, 55, 64, 181, 104, 113, 192],
[49, 64, 78, 87, 103, 121, 120, 101],
[72, 92, 95, 98, 112, 100, 103, 199]];
function quantize(w, h) {
w = w | 0;
h = h | 0;
var i = 0, j = 0, p = imageptr, v = 0, k = 0, l = 0, q = 0;
var buf = imageptr + (w*h*3)<<2;
for (i = 0; i < h * 3; i += 8) {
for (j = 0; j < w; j += 8) {
dct.od_bin_fdct8x8(buf, 8, (p + j) << 2, w, tempptr);
for (k = 0; k < 8; k++) {
for (l = 0; l < 8; l++) {
var q = quant_table[k][l] * 8191 >> 8;
v = I4[(buf>>2)+k*8+l];
v = Math.round(v / q);
I4[(buf>>2)+k*8+l] = v * q;
}
}
dct.od_bin_idct8x8((p + j) << 2, w, buf, 8, tempptr);
}
p += 8 * w;
}
}
function foo() {
var canvas = document.getElementById('canvas');
var srcimage = document.getElementById('srcimage');
var w = srcimage.width;
var h = srcimage.height;
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(srcimage, 0, 0, w, h, 0, 0, w, h);
var image = ctx.getImageData(0, 0, w, h);
var imagebuffer = window.I4.subarray(imageptr>>2, (imageptr>>2) + w * h * 3);
rgb2ycbco(image.data, imagebuffer, w*h);
var ts = new Date();
filter.lapvert(imageptr, w, h);
filter.laphorz(imageptr, w, h, tempptr);
console.log(new Date() - ts);
ycbco2rgb(imagebuffer, image.data, w*h);
ctx.putImageData(image, 0, 0);
canvas = document.getElementById('canvas2');
canvas.width = w;
canvas.height = h;
ctx = canvas.getContext('2d');
ts = new Date();
quantize(w, h);
console.log(new Date() - ts);
ycbco2rgb(imagebuffer, image.data, w*h);
ctx.putImageData(image, 0, 0);
ts = new Date();
filter.unlaphorz(imageptr, w, h, tempptr);
filter.unlapvert(imageptr, w, h);
console.log(new Date() - ts);
ycbco2rgb(imagebuffer, image.data, w*h);
canvas = document.getElementById('canvas3');
canvas.width = w;
canvas.height = h;
ctx = canvas.getContext('2d');
ctx.putImageData(image, 0, 0);
ts = new Date();
var dering_tables = imageptr + ((w * h * 3) << 2) | 0;
dering.dering_image(imageptr, w, h, 8191>>4, dering_tables);
console.log(new Date() - ts);
ycbco2rgb(imagebuffer, image.data, w*h);
canvas = document.getElementById('canvas4');
canvas.width = w;
canvas.height = h;
ctx = canvas.getContext('2d');
ctx.putImageData(image, 0, 0);
}
</script>
<img id="srcimage" src="Clovisfest.jpg" onload="foo();"/>
<canvas id='canvas' width=1 height=1></canvas>
<canvas id='canvas2' width=1 height=1></canvas>
<canvas id='canvas3' width=1 height=1></canvas>
<canvas id='canvas4' width=1 height=1></canvas>
</body>