从零搭建一个图片转WebP的小程序或网站（开发者实战）

如果你想自己搭建一个图片转WebP的在线工具，或者在小程序中集成转换功能，本文提供技术方案。我们将介绍使用浏览器端JavaScript库（无需后端）实现纯前端WebP转换的方法，以及如何封装成API。

一、浏览器端转换：使用Browser Image Compression库

现代浏览器支持WebP编码，通过Canvas API可以将图片转为WebP。示例代码：
function toWebP(file, quality = 0.8) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const img = new Image();
      img.onload = () => {
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        canvas.toBlob((blob) => {
          resolve(blob);
        }, 'image/webp', quality);
      };
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  });
}
这个函数接受File对象和质量参数，返回WebP Blob。可以轻松集成到你的网站或小程序。

二、使用WebAssembly版本的libwebp

Canvas API转换的WebP质量有时不如libwebp（Google官方编码库）。可以通过WebAssembly在浏览器中运行libwebp，获得更高质量的转换。开源项目webp-hero或wasm-vips提供了封装。这种方式实现稍复杂，但效果最佳。

三、搭建WebP转换API（Node.js后端）

如果你需要提供API服务，可以使用Node.js + sharp库。示例：
const sharp = require('sharp');
app.post('/convert', upload.single('image'), async (req, res) => {
  const webpBuffer = await sharp(req.file.buffer).webp({ quality: 80 }).toBuffer();
  res.set('Content-Type', 'image/webp');
  res.send(webpBuffer);
});
部署后，客户端可以上传图片获取WebP结果。

四、小程序中实现WebP转换

微信小程序Canvas API与Web类似，可以将图片绘制到canvas，然后调用canvasToTempFilePath，指定fileType为webp。注意基础库版本需支持。示例：
const ctx = wx.createCanvasContext('myCanvas');
ctx.drawImage(tempFilePath, 0, 0, width, height);
ctx.draw(false, () => {
  wx.canvasToTempFilePath({
    canvasId: 'myCanvas',
    fileType: 'webp',
    quality: 0.8,
    success(res) { console.log(res.tempFilePath) }
  });
});
这样用户可以在小程序内转换图片为WebP。