fork of https://bellard.org/bpg/ Better Portable Graphics format including working WASM (WebAssembly) build.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

106 lines
3.3 KiB

<html>
<head>
<meta charset="UTF-8">
<!-- The following scripts are available (sorted by increasing size):
bpgdec8.js : 8 bit only, no animation
bpgdec.js : up to 14 bits, no animation
bpgdec8a.js : 8 bit only, animations
-->
<script type="text/javascript" src="bpgdec8.js"></script>
</head>
<body>
<h1>BPG Decoding Demo</h1>
IMG tag:<br>
<script>
(function (window, undefined) {
window.addEventListener('DOMContentLoaded', () => {
if (!('serviceWorker' in navigator)) {
console.log('service workers not supported 😣')
return
}
const bpgProcessingCanvas = document.createElement("canvas");
const bpgProcessingContext = bpgProcessingCanvas.getContext("2d");
const bpgDecoder = new BPGDecoder(bpgProcessingContext);
let initialized = false;
const initialize = () => {
initialized = true;
const img = document.createElement("img");
img.setAttribute('src', "lena512color.bpg");
document.body.appendChild(img);
};
navigator.serviceWorker.register('serviceworker.js', {scope: "/html/"}).then(
(reg) => {
if(reg.installing) {
console.log('Service worker installing');
setTimeout(() => {
window.location = window.location.origin+window.location.pathname;
}, 200);
} else if(reg.waiting) {
console.log('Service worker installed');
if(!initialized) {
initialize();
}
} else if(reg.active) {
console.log('Service worker active');
if(!initialized) {
initialize();
}
}
},
err => {
console.error('service worker registration failed! 😱', err)
}
);
navigator.serviceWorker.addEventListener('message', event => {
if(event.data.log) {
console.log(`serviceworker: ${event.data.log}`);
}
if(event.data.bpgBytes) {
bpgDecoder.bpgBytesToImageDataFrames(event.data.bpgBytes).then(frames => {
const imageData = frames[0]['img'];
const pngEncodingCanvas = document.createElement("canvas");
pngEncodingCanvas.style.display = "none";
pngEncodingCanvas.setAttribute("width", imageData.width);
pngEncodingCanvas.setAttribute("height", imageData.height);
document.body.appendChild(pngEncodingCanvas);
const pngEncodingContext = pngEncodingCanvas.getContext("2d");
pngEncodingContext.putImageData(imageData, 0, 0);
pngEncodingCanvas.toBlob(async (blob) => {
const arrayBuffer = await blob.arrayBuffer();
const uint8Array = new Uint8Array(arrayBuffer);
navigator.serviceWorker.controller.postMessage({pngBytes: uint8Array, url: event.data.url});
document.body.removeChild(pngEncodingCanvas)
}, "image/png");
})
}
});
});
// Array.from(document.querySelectorAll("img")).forEach(x => load_bpg_image(x))
// var img, canvas, ctx;
// canvas = document.getElementById("mycanvas");
// ctx = canvas.getContext("2d");
// img = new BPGDecoder(ctx);
// img.onload = function() {
// /* draw the image to the canvas */
// ctx.putImageData(this.imageData, 0, 0);
// };
// img.load("lena512color.bpg");
})(window);
</script>
</body>
</html>