libwebp-compress/readme.md

# 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