static/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Caesium WASM Demo</title>

    <style>
        body {
            font-family: 'sans-serif';
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: auto;
        }

        .image-previews {
            display: flex;
            justify-content: space-between;
        }

        .image-container {
            width: 49%;
        }

        .image {
            width: 100%;
        }
    </style>
</head>
<body>

<div class="container">
    <div style="margin-bottom: 10px">
        <input type="file" id="fileInput">
        <label for="quality">Quality</label> <input type="number" id="quality" value="80">
        <span id="status" style="margin-left: 10px"></span>
    </div>

    <div class="image-previews">
        <div class="image-container">
            <p style="font-weight: bold">Original Image</p> <span id="originalSize"></span>
            <img class="image" alt="original" src="" id="original">
        </div>
        <div class="image-container">
            <p style="font-weight: bold">Compressed Image</p> <span id="compressedSize"></span>
            <img class="image" alt="compressed" src="" id="result">
        </div>
    </div>

</div>
</body>

<script type="module">
    import CaesiumWASM from "./libcaesium-wasm.js";

    CaesiumWASM().then(CaesiumWASM => {
        const input = document.getElementById("fileInput");
        input.addEventListener("change", async () => {
            document.getElementById('status').innerText = 'Compressing...';
            const ab = await input.files[0].arrayBuffer();
            const ui8a = new Uint8Array(ab);
            document.getElementById('original').src = URL.createObjectURL(
                new Blob([ui8a])
            );
            document.getElementById('originalSize').innerText = `${ui8a.length} bytes`;
            // console.log("Uint8Array", ui8a, ui8a.length);

            let ptr = CaesiumWASM._malloc(ui8a.length);
            CaesiumWASM.HEAP8.set(ui8a, ptr);

            const js_wrapped_compress = CaesiumWASM.cwrap("w_compress", "number", ["number", "number", "number", "number"]);
            const dataPtr = js_wrapped_compress(ptr, ui8a.length, document.getElementById('quality').value, 1);
            let status = CaesiumWASM.getValue(dataPtr, 'i32')
            let errorCode = CaesiumWASM.getValue(dataPtr + 4, 'i32')
            let vecPtr = CaesiumWASM.getValue(dataPtr + 8, 'i32');
            let len = CaesiumWASM.getValue(dataPtr + 12, 'i32');

            let res = {
                status,
                errorCode,
                vecPtr,
                len
            }
            console.log(res)
            if (status === 1) {
                document.getElementById('status').innerText = 'Done!';
                let myArray = new Uint8Array(CaesiumWASM.HEAPU8.buffer, vecPtr, len);
                document.getElementById('result').src = URL.createObjectURL(
                    new Blob([myArray])
                );
                document.getElementById('compressedSize').innerText = `${myArray.length} bytes`;
            } else {
                document.getElementById('status').innerText = 'ERROR :(';
            }

            let drop_vector_struct = CaesiumWASM.cwrap('drop_vector_struct', null, ['number']);
            drop_vector_struct(dataPtr);

            CaesiumWASM._free(ptr);
            // CaesiumWASM._free(vecPtr);
        });
    })

</script>
</html>