<!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>
|