86 lines
2.1 KiB
Markdown
86 lines
2.1 KiB
Markdown
|
# libwebp 压缩图片的 wasm 实现
|
|||
|
|
|
|||
|
|
使用 WebAssembly 实现的 libwebp 图片压缩工具。支持调整宽高和压缩质量。
|
|||
|
|
|
|||
|
|
## 目录结构
|
|||
|
|
|
|||
|
|
- `/output` - 编译后的文件
|
|||
|
|
- `/test` - 测试文件
|
|||
|
|
|
|||
|
|
## 编译方式
|
|||
|
|
|
|||
|
|
使用 Docker emsdk 环境进行编译。“生成” 目录下有编译命令。
|
|||
|
|
|
|||
|
|
## 使用方法
|
|||
|
|
|
|||
|
|
### 1. 引入文件
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<script src="convert_image_to_webp.js"></script>
|
|||
|
|
```
|
|||
|
|
同目录下需要有 convert_image_to_webp.wasm 文件
|
|||
|
|
|
|||
|
|
### 2. 初始化 WASM 模块
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
var Module = {
|
|||
|
|
onRuntimeInitialized: function () {
|
|||
|
|
// WASM 加载完成后的回调
|
|||
|
|
},
|
|||
|
|
onAbort: function (error) {
|
|||
|
|
// 错误处理
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 图片转换调用示例
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
function decodeToWebp(buffer) {
|
|||
|
|
// 转换为 Uint8Array
|
|||
|
|
var inputData = new Uint8Array(buffer);
|
|||
|
|
// 分配内存
|
|||
|
|
var outputSizePtr = Module.malloc(4);
|
|||
|
|
var inputDataPtr = Module.malloc(inputData.length);
|
|||
|
|
// 复制数据到 WASM 内存
|
|||
|
|
Module.HEAPU8.set(inputData, inputDataPtr);
|
|||
|
|
// 调用转换函数
|
|||
|
|
var webpPtr = Module.convert_image_to_webp(
|
|||
|
|
inputDataPtr, // 输入数据指针
|
|||
|
|
inputData.length, // 输入数据长度
|
|||
|
|
1920, // 转换后的宽度
|
|||
|
|
1080, // 转换后的高度
|
|||
|
|
50, // 压缩质量 (0-100)
|
|||
|
|
outputSizePtr // 输出大小指针
|
|||
|
|
);
|
|||
|
|
// 获取输出大小
|
|||
|
|
var outputSize = Module.getValue(outputSizePtr, "i32");
|
|||
|
|
// 获取输出数据
|
|||
|
|
var webpData = new Uint8Array(Module.HEAPU8.buffer, webpPtr, outputSize);
|
|||
|
|
// 释放内存
|
|||
|
|
Module.free(outputSizePtr);
|
|||
|
|
Module.free(webpPtr);
|
|||
|
|
Module.free(inputDataPtr);
|
|||
|
|
return webpData;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 4. 从文件加载并转换
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
fetch("image.png")
|
|||
|
|
.then((response) => response.arrayBuffer())
|
|||
|
|
.then((buffer) => {
|
|||
|
|
const webpData = decodeToWebp(buffer);
|
|||
|
|
// 使用转换后的 WebP 数据
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
- 确保在 WASM 模块加载完成后再进行转换操作
|
|||
|
|
- 记得及时释放分配的内存
|
|||
|
|
- 支持的输入格式：JPG, PNG, TGA, BMP, PSD, GIF, HDR, PIC 等常见图片格式([stb_image.h 支持的格式](https://github.com/nothings/stb))
|
|||
|
|
- 支持的输出格式：WebP
|
|||
|
|
- 支持的压缩质量：0-100
|