fast-md5-web
Version:
A TypeScript project with tsup bundler for Rust WASM MD5 calculation
120 lines (98 loc) • 4.65 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MD5 问题调试</title>
<script src="https://cdn.jsdelivr.net/npm/spark-md5@3.0.2/spark-md5.min.js"></script>
<script type="module">
import init, { Md5Calculator } from './wasm_md5.js';
let md5Calculator;
async function initWasm() {
try {
await init('./wasm_md5_bg.wasm');
md5Calculator = new Md5Calculator();
md5Calculator.set_log_enabled(true);
console.log('WASM 模块初始化成功');
runTests();
} catch (error) {
console.error('WASM 初始化失败:', error);
}
}
async function runTests() {
console.log('开始测试...');
// 测试空文件
await testEmptyFile();
// 测试小文件
await testSmallFile();
// 测试特定内容
await testSpecificContent();
}
async function testEmptyFile() {
console.log('\n=== 测试空文件 ===');
const emptyData = new Uint8Array(0);
// WASM 计算
const wasmResult = await md5Calculator.calculate_md5_async(emptyData, 32);
console.log('WASM 结果:', wasmResult);
// Spark MD5 计算
const spark = new SparkMD5.ArrayBuffer();
spark.append(emptyData.buffer);
const sparkResult = spark.end();
console.log('Spark 结果:', sparkResult);
// 预期结果（空文件的MD5）
const expected = 'd41d8cd98f00b204e9800998ecf8427e';
console.log('预期结果:', expected);
console.log('WASM 匹配:', wasmResult === expected);
console.log('Spark 匹配:', sparkResult === expected);
console.log('两者一致:', wasmResult === sparkResult);
}
async function testSmallFile() {
console.log('\n=== 测试小文件 ===');
const testData = new TextEncoder().encode('hello world');
// WASM 计算
const wasmResult = await md5Calculator.calculate_md5_async(testData, 32);
console.log('WASM 结果:', wasmResult);
// Spark MD5 计算
const spark = new SparkMD5.ArrayBuffer();
spark.append(testData.buffer);
const sparkResult = spark.end();
console.log('Spark 结果:', sparkResult);
// 预期结果（"hello world"的MD5）
const expected = '5d41402abc4b2a76b9719d911017c592';
console.log('预期结果:', expected);
console.log('WASM 匹配:', wasmResult === expected);
console.log('Spark 匹配:', sparkResult === expected);
console.log('两者一致:', wasmResult === sparkResult);
}
async function testSpecificContent() {
console.log('\n=== 测试特定内容 ===');
// 创建一个1KB的测试文件
const testData = new Uint8Array(1024);
for (let i = 0; i < testData.length; i++) {
testData[i] = i % 256;
}
// WASM 计算
const wasmResult = await md5Calculator.calculate_md5_async(testData, 32);
console.log('WASM 结果:', wasmResult);
// Spark MD5 计算
const spark = new SparkMD5.ArrayBuffer();
spark.append(testData.buffer);
const sparkResult = spark.end();
console.log('Spark 结果:', sparkResult);
console.log('两者一致:', wasmResult === sparkResult);
// 测试不同长度的MD5
const wasm16 = await md5Calculator.calculate_md5_async(testData, 16);
console.log('WASM 16位:', wasm16);
console.log('Spark 16位:', sparkResult.substring(0, 16));
console.log('16位一致:', wasm16 === sparkResult.substring(0, 16));
}
// 初始化
initWasm();
</script>
</head>
<body>
<h1>MD5 问题调试</h1>
<p>请打开浏览器控制台查看测试结果</p>
<div id="results"></div>
</body>
</html>