libwebp 压缩图片的 wasm 实现

使用 WebAssembly 实现的 libwebp 图片压缩与同时转换成webp格式工具。支持调整宽高和压缩质量。 在线demo git

目录结构

• /output - 编译后的文件
• /test - 测试文件

编译方式

使用 Docker emsdk 环境进行编译。“生成” 目录下有编译命令。

使用方法

1. 引入文件

<script src="convert_image_to_webp.js"></script>

同目录下需要有 convert_image_to_webp.wasm 文件

2. 初始化 WASM 模块

var Module = {
  onRuntimeInitialized: function () {
    // WASM 加载完成后的回调
  },
  onAbort: function (error) {
    // 错误处理
  },
};

3. 图片转换调用示例

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. 从文件加载并转换

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 支持的格式)
• 支持的输出格式：WebP
• 支持的压缩质量：0-100