使用 Canvas API 在浏览器中将 PNG 图像转换为 WebP。PNG 为无损，对摄影或渐变较多的内容往往比 WebP 更大；以可调质量重新编码为 WebP 可减小面向 Web 的文件体积。
工作原理
工具用 FileReader 读取本地 .png，解码为 HTMLImageElement，将像素绘制到离屏 canvas，再用 canvas.toDataURL('image/webp', quality) 导出。绘制时 alpha 透明度会合成到不透明背景——这是浏览器将 PNG 压平为 WebP 时的典型行为。
适用场景
- 压缩 UI 截图或图标以加快页面加载
- 在批量转换前预览 WebP 质量设置
- 在没有桌面工具时转换单个资源
限制
不保留无损 PNG 透明度与色彩配置文件。不支持动画 PNG（APNG）。超大图可能触及浏览器内存上限。编码器质量取决于浏览器内置的 WebP 支持。
示例
例如，在表单中填入默认示例值，将输出与已知参考对比；每次只调整一个输入，观察结果如何变化。