-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
93 lines (76 loc) · 2.62 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
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="libbpg-0.9.1/bpgdec.js"></script>
<script type="text/javascript" src="libwebp.js"></script>
</head>
<body>
<h1>BPG vs. WebP decoding in JavaScript</h1>
<p>BPG <span id="bpg-result"></span></p>
<canvas id="bpg-canvas" width="1872" height="1926"></canvas>
<p>WebP <span id="webp-result"></span></p>
<canvas id="webp-canvas" width="1872" height="1926"></canvas>
<script>
(function ()
{
function load (url, callback) {
var request = new XMLHttpRequest();
request.open("get", url, true);
request.responseType = "arraybuffer";
request.onload = function(event) {
callback(request.response);
};
request.send();
}
function decodeWebp(data, ctx) {
function reorderArgbToRgba (argbData) {
var rgbaData = new Uint8Array(argbData.length);
for (var i = 0; i < argbData.length; i += 4) {
rgbaData[i] = argbData[i + 1];
rgbaData[i + 1] = argbData[i + 2];
rgbaData[i + 2] = argbData[i + 3];
rgbaData[i + 3] = argbData[i];
}
return rgbaData;
}
var webpDecoder = new WebPDecoder();
data = new Uint8Array(data);
var config = webpDecoder.WebPDecoderConfig;
var output_buffer = config.j;
output_buffer.J = 4;
var status = webpDecoder.WebPDecode(data, data.length, config);
if (status !== 0) {
throw new Error("WebP decode failed");
}
var buffer = ctx.createImageData(output_buffer.width, output_buffer.height);
buffer.data.set(reorderArgbToRgba(output_buffer.c.RGBA.ma));
return buffer;
}
var canvas0, ctx0, canvas1, ctx1;
canvas0 = document.getElementById("bpg-canvas");
ctx0 = canvas0.getContext("2d");
canvas1 = document.getElementById("webp-canvas");
ctx1 = canvas1.getContext("2d");
var bpgDecoder = new BPGDecoder(ctx0);
load("0.bpg", function (data) {
setTimeout(function () {
var t0 = Date.now();
var imageData = bpgDecoder.decode(data);
console.log("BPG", Date.now() - t0);
document.getElementById("bpg-result").innerHTML = "(" + (Date.now() - t0) + "ms)";
ctx0.putImageData(imageData, 0, 0);
}, 500);
});
load("0.webp", function (data) {
setTimeout(function () {
var t0 = Date.now();
var imageData = decodeWebp(data, ctx0);
console.log("WebP", Date.now() - t0);
document.getElementById("webp-result").innerHTML = "(" + (Date.now() - t0) + "ms)";
ctx1.putImageData(imageData, 0, 0);
}, 500);
})
})();
</script>
</body>
</html>