92 lines
107 KiB
HTML
92 lines
107 KiB
HTML
|
<body>
|
|||
|
|
|
|||
|
|
base64图：
|
|||
|
|
<img id="base64Image"
|
|||
|
|
src="data:image/jpeg;base64,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
|
|||
|
|
alt="Base64 Image">
|
|||
|
|
<span>base64 图片大小：<span id="base64Size"></span></span>
|
|||
|
|
|
|||
|
|
WebP 图：
|
|||
|
|
<img id="webpImage" alt="WebP Image">
|
|||
|
|
<br>
|
|||
|
|
<span>WebP 缩略图片大小：<span id="webpSize"></span></span>
|
|||
|
|
<br>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
function base64ToArrayBuffer(base64) {
|
|||
|
|
var binaryString = atob(base64);
|
|||
|
|
var len = binaryString.length;
|
|||
|
|
var bytes = new Uint8Array(len);
|
|||
|
|
for (var i = 0; i < len; i++) {
|
|||
|
|
bytes[i] = binaryString.charCodeAt(i);
|
|||
|
|
}
|
|||
|
|
// 返回 ArrayBuffer
|
|||
|
|
return bytes.buffer;
|
|||
|
|
}
|
|||
|
|
// 将 WASM 生成的二进制数据转换成 Base64
|
|||
|
|
function arrayBufferToBase64(buffer) {
|
|||
|
|
let binary = '';
|
|||
|
|
let len = buffer.byteLength;
|
|||
|
|
for (let i = 0; i < len; i++) {
|
|||
|
|
binary += String.fromCharCode(buffer[i]);
|
|||
|
|
}
|
|||
|
|
return btoa(binary); // 使用 JavaScript 的 btoa() 函数
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化 WebAssembly 模块
|
|||
|
|
var Module = {
|
|||
|
|
onRuntimeInitialized: function () {
|
|||
|
|
|
|||
|
|
// let baseData= document.getElementById("base64Image").src;
|
|||
|
|
// baseData=baseData.split(",")[1];
|
|||
|
|
// let buffer = base64ToArrayBuffer(baseData);
|
|||
|
|
// decodeToWebpp(buffer);
|
|||
|
|
|
|||
|
|
fetch('./car.jpg').then(response => response.arrayBuffer()).then(buffer => {
|
|||
|
|
decodeToWebpp(buffer);
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function decodeToWebpp(buffer) {
|
|||
|
|
// 显示原始图片大小
|
|||
|
|
document.getElementById("base64Size").textContent = (buffer.byteLength / 1024).toFixed(2) + " KB";
|
|||
|
|
|
|||
|
|
// 转换图像为 Uint8Array
|
|||
|
|
var inputData = new Uint8Array(buffer);
|
|||
|
|
|
|||
|
|
// 分配内存以存储输出 WebP 大小
|
|||
|
|
var outputSizePtr = Module._malloc(4); // 存储输出大小的指针
|
|||
|
|
|
|||
|
|
// 设置目标宽高和质量因子
|
|||
|
|
var targetWidth = 60; // 目标宽度
|
|||
|
|
var targetHeight = 133; // 目标高度
|
|||
|
|
var qualityFactor = 5 // 压缩质量 (0 - 100)
|
|||
|
|
var inputDataPtr = Module._malloc(inputData.length);
|
|||
|
|
Module.HEAPU8.set(inputData, inputDataPtr);
|
|||
|
|
|
|||
|
|
// 调用 WebAssembly 函数进行图像转换，返回 WebP 数据指针
|
|||
|
|
var webpPtr = Module._convert_image_to_webp(inputDataPtr, inputData.length, targetWidth, targetHeight, qualityFactor, outputSizePtr);
|
|||
|
|
|
|||
|
|
// 获取 WebP 数据大小
|
|||
|
|
var outputSize = Module.getValue(outputSizePtr, 'i32');
|
|||
|
|
|
|||
|
|
// 从 WebAssembly 内存中读取 WebP 数据
|
|||
|
|
var webpData = new Uint8Array(Module.HEAPU8.buffer, webpPtr, outputSize);
|
|||
|
|
|
|||
|
|
// 显示 WebP 图片大小
|
|||
|
|
document.getElementById("webpSize").textContent = (outputSize / 1024).toFixed(2) + " KB";
|
|||
|
|
|
|||
|
|
// 将 WebP 数据转换为 base64，并显示
|
|||
|
|
let img = document.getElementById("webpImage");
|
|||
|
|
img.src = "data:image/webp;base64," + arrayBufferToBase64(webpData);
|
|||
|
|
|
|||
|
|
// 使用完成后释放内存
|
|||
|
|
Module._free(outputSizePtr);
|
|||
|
|
Module._free(webpPtr);
|
|||
|
|
Module._free(inputDataPtr);
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<script src="convert_image_to_webp.js"></script>
|