Load wasm and data file as object url #86

SOULPWRD · 2024-10-25T12:30:37Z

Hi :)

Is it somehow possible to load .wasm and .data file from URL.createObjectURL? I'm working on the offline app and I need to store wasm and data file as base64 file locally.

I've edited your example a bit:


<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/package/gdal3.js"
        integrity="sha384-yW4c2Jx7lsREjJg58+ZI5U6gAso2bRAPw3LdzPWm7z8+rMJ24R7AS+EFyXDPxgYM"
        crossorigin="anonymous"
    ></script>
</head>
<body>
    Loading...
    <script type="text/javascript">
        async function start() {

            const [wasm, data, js] = await Promise.all([
                fetch('https://cdn.jsdelivr.net/npm/[email protected]/dist/package/gdal3WebAssembly.wasm'),
                fetch('https://cdn.jsdelivr.net/npm/[email protected]/dist/package/gdal3WebAssembly.data'),
                fetch('https://cdn.jsdelivr.net/npm/[email protected]/dist/package/gdal3.js')
            ]).then(function (data) {
                return Promise.all(data.map(function (d) {
                    return d.blob();
                }));
            }).then(function (blobs) {
                return blobs.map(window.URL.createObjectURL);
            });

            const paths = {
                wasm,
                data,
                js
            };

            const Gdal = await initGdalJs({paths});
            const numberOfDrivers = Object.keys(Gdal.drivers.raster).length + Object.keys(Gdal.drivers.vector).length;
            document.write(`Number of driver: ${numberOfDrivers}`);
        }

        start();
    </script>
</body>
</html>

but I'm getting XMLHttpRequest errors.

If it's not possible, would it be possible to support it? For instance SQL.js supports a locate function.

const SQL = await initSqlJs({
  // Required to load the wasm binary asynchronously. Of course, you can host it wherever you want
  // You can omit locateFile completely when running in node
  locateFile: file => `https://sql.js.org/dist/${file}`
});

// and you can turn it into

const SQL = await initSqlJs({
  locateFile: file => URL.createObjectURL(blob)
});

// which works well.

Thank you in advance.
Best, Martin

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Load wasm and data file as object url #86

Load wasm and data file as object url #86

SOULPWRD commented Oct 25, 2024

Load wasm and data file as object url #86

Load wasm and data file as object url #86

Comments

SOULPWRD commented Oct 25, 2024