87 lines
2.2 KiB
Markdown
87 lines
2.2 KiB
Markdown
# libwebp 压缩图片的 wasm 实现
|
||
|
||
使用 WebAssembly 实现的 libwebp 图片压缩与同时转换成webp格式工具。支持调整宽高和压缩质量。
|
||
[在线demo](https://kuraa.cc/upload/index.html)
|
||
[git](https://git.kuraa.cc/kura/libwebp-compress)
|
||
## 目录结构
|
||
|
||
- `/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
|