A template for kick starting a Rust and WebAssembly project using wasm-pack.
Built with 🦀🕸 by The Rust and WebAssembly Working Group
📚 Read this template tutorial! 📚
This template is designed for compiling Rust libraries into WebAssembly and publishing the resulting package to NPM.
Be sure to check out other wasm-pack tutorials online for other
templates and usages of wasm-pack.
Learn more about cargo generate here.
cargo generate --git https://github.com/rustwasm/wasm-pack-template.git --name my-project
cd my-project
wasm-pack build
wasm-pack test --headless --firefox
wasm-pack publish
-
wasm-bindgenfor communicating between WebAssembly and JavaScript. -
console_error_panic_hookfor logging panic messages to the developer console. -
LICENSE-APACHEandLICENSE-MIT: most Rust projects are licensed this way, so these are included for you
Licensed under either of
- Apache License, Version 2.0, (LICENSE-APACHE or http://www.apache.org/licenses/LICENSE-2.0)
- MIT license (LICENSE-MIT or http://opensource.org/licenses/MIT)
at your option.
Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in the work by you, as defined in the Apache-2.0 license, shall be dual licensed as above, without any additional terms or conditions.
<!DOCTYPE html>
<html>
<head>
<title>WASM MD5 Test</title>
</head>
<body>
<h1>WASM MD5 Test</h1>
<input type="file" id="fileInput">
<p>MD5: <span id="md5Result"></span></p>
<button >a</button>
<script type="module">
import init, { calculate_md5, calculate_md5_from_chunks } from './pkg/wasm_file_md5.js';
async function run() {
await init();
const fileInput = document.getElementById('fileInput');
const md5Result = document.getElementById('md5Result');
fileInput.addEventListener('change', async (event) => {
const file = event.target.files[0];
if (!file) return;
try {
const startTime = performance.now();
const md5 = await calculateMD5WithStream(file);
const endTime = performance.now();
md5Result.textContent = `MD5: ${md5}, time: ${endTime - startTime}ms`;
} catch (error) {
console.error("Error reading file:", error);
md5Result.textContent = "Error reading file: " + error.message;
}
});
async function calculateMD5WithStream(file) {
const stream = file.stream();
const reader = stream.getReader();
const chunks = [];
try {
while(true) {
const { done, value } = await reader.read();
if(done) {
break;
}
chunks.push(value);
}
return calculate_md5_from_chunks(chunks);
} catch (error) {
console.error("Error reading stream:", error);
throw error;
} finally {
reader.releaseLock();
}
}
}
run();
</script>
</body>
</html>