<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TinyEXR to Canvas</title>
<script src="tinyexr.js"></script>
<style>
</style>
</head>
<body>
<canvas id="imgCanvas"></canvas>
</body>
<script>
let canvas = document.getElementById('imgCanvas');
let ctx = canvas.getContext('2d');
fetch("./asakusa.exr").then(response => {
return response.arrayBuffer();
}).then(arrayBuffer => {
// let exrImg = parseExr(arrayBuffer);
let data = new Uint8Array(arrayBuffer);
let exrImg = new Module.EXRLoader(data);
canvas.width = exrImg.width();
canvas.height = exrImg.height();
let imageArray = exrImg.getBytes().map(num => {
// Convert values to 0-255 range and apply gamma curve
return Math.pow(num, 0.44) * 256;
});
let image8Array = new Uint8ClampedArray(imageArray);
let imageData = new ImageData(image8Array, exrImg.width(), exrImg.height());
ctx.putImageData(imageData, 0, 0);
});
</script>
</html>