|
0
|
1 <html>
|
|
|
2 <head>
|
|
|
3 <meta charset="UTF-8">
|
|
|
4 <!-- The following scripts are available (sorted by increasing size):
|
|
|
5 bpgdec8.js : 8 bit only, no animation
|
|
|
6 bpgdec.js : up to 14 bits, no animation
|
|
|
7 bpgdec8a.js : 8 bit only, animations
|
|
|
8 -->
|
|
|
9 <script type="text/javascript" src="bpgdec8a.js"></script>
|
|
|
10 </head>
|
|
|
11 <body>
|
|
|
12 <h1>BPG Decoding Demo</h1>
|
|
|
13 IMG tag:<br>
|
|
|
14 <img src="lena512color.bpg">
|
|
|
15 <p>
|
|
|
16 IMG tag with animated image:<br>
|
|
|
17 <img src="clock.bpg">
|
|
|
18 <p>
|
|
|
19 Dynamic loading in a canvas:<br>
|
|
|
20 <canvas id="mycanvas" width="512" height="512"></canvas>
|
|
|
21 <script>
|
|
|
22 (function ()
|
|
|
23 {
|
|
|
24 var img, canvas, ctx;
|
|
|
25
|
|
|
26 canvas = document.getElementById("mycanvas");
|
|
|
27 ctx = canvas.getContext("2d");
|
|
|
28
|
|
|
29 img = new BPGDecoder(ctx);
|
|
|
30 img.onload = function() {
|
|
|
31 /* draw the image to the canvas */
|
|
|
32 ctx.putImageData(this.imageData, 0, 0);
|
|
|
33 };
|
|
|
34 img.load("lena512color.bpg");
|
|
|
35 })();
|
|
|
36 </script>
|
|
|
37 </body>
|
|
|
38 </html>
|
