实战笔记：为了省下服务器流量费，我给小程序加上了 Webp 转换

Fri, 05 Jan 2018 12:40:16 +0800

在“流量贵如油”的今天，作为一名自己买服务器、撸代码的站长，如何给服务器“减负”是每天都要思考的必修课。

痛点：博客网站的流量杀手

我有一个运行多年的个人博客。在分析服务器日志时发现，最大的流量开销并不是文字，而是文章里那些高清的图片。

虽然 JPG 和 PNG 已经很普及，但随着屏幕分辨率越来越高，原图动辄几 MB，对于按带宽付费或者流量计费的服务器来说，这都是白花花的银子。

方案：Webp 格式的“降维打击”

现在主流浏览器（Chrome, Safari, Edge 等）已经全面支持 Webp 格式。相比于传统的 JPG 和 PNG，Webp 可以在保证肉眼看不出画质损失的前提下，将文件体积压缩 30% 到 70%。这是一个非常惊人的数据。这意味着原本 100GB 的图床流量，换成 Webp 后可能只需要 30GB。

为了方便处理博客素材，我决定把这个需求也集成到“豆子工具”里。

实现：基于 Google 官方工具链

图片转换的实现原理与我之前的“音频转换”方案异曲同工，主打一个稳定与高效：

核心引擎：在服务端安装了 Google 官方出品的 webp 命令行工具链（cwebp）。
后端调度：依然由 Go 语言担任“指挥官”，接收小程序上传的 PNG/JPG 原图，调用外部 cwebp 进程进行压缩。
参数优化：在后端我预设了平衡性最好的质量参数，确保图片在压缩后的清晰度依然能够满足博客展示的需求。
闭环应用：现在我写每一篇博客前，都会先用小程序把配图过一遍，转成 Webp 后再上传。

下面是核心代码片段的注解，这是小程序端：

<page-meta root-font-size="system" />
<view class="page">
<view class="page__hd">
<view class="page__title">图片格式转换</view>
<view class="page__desc">可将图片转换为WebP格式，用于Web项目。</view>
</view>
<view class="page__bd">
<view class="weui-cells weui-cells_radio">
<view class="weui-cell weui-cell_uploader">
<view class="weui-cell__bd">
<view class="weui-uploader">
<view class="weui-uploader__hd">
<view aria-role="option" class="weui-uploader__overview">
<view class="weui-uploader__title">图片信息</view>
</view>
<view class="weui-uploader__tips">
请选取5M内的图片，目前仅支持一张
</view>
</view>
<view class="weui-uploader__bd">
<view class="weui-uploader__files" id="uploaderFiles">
<block wx:for="{{files}}" wx:key="*this">
<view class="weui-uploader__file" bindtap="previewImage" id="{{item}}">
<image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
</view>
</block>
</view>
<view class="weui-uploader__input-box">
<view aria-role="button" aria-label="选择图片" class="weui-uploader__input" bindtap="chooseImage"></view>
</view>
</view>
</view>
</view>
</view>
<view class="weui-cell">
<view wx:if="{{headImageExist}}">
<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="aspectFit" src="{{headImage}}" bindtap="previewMakeImage"></image>
</view>
<view wx:else><text>转换完成的图片会展示在这里</text></view>
</view>
<view class="weui-cell">
<view class="button-sp-area">
<view class="weui-btn weui-btn_primary weui-wa-hotarea" aria-role="button" bindtap="imageConvert">开始转换</view>
<view class="weui-btn weui-btn_warn weui-wa-hotarea" aria-role="button" bindtap="saveToPhotosAlbum">保存到相册</view>
</view>
</view>
</view>
</view>
</view>

上面是界面骨架，现在说下它的灵魂。首先通过小程序的上传文件API，wx.uploadfile将图片文件上传到服务器，然后使用Go调用cwebp进行格式转换，转换成功后，下载文件到小程序本地，然后删除服务器端的文件。

实战笔记：我把 FFmpeg 搬进小程序，搞定了音频格式转换

Thu, 04 Jan 2018 12:40:16 +0800

在“豆子工具”众多的功能里，音频转换（m4a 转 mp3） 是我使用频率最高、也最具有“个人救赎”色彩的一个。

起因：被软件更新“背刺”后的郁闷

这个功能的由来非常接地气：有一段时间，我需要频繁地将苹果手机录音产生的 m4a 格式文件转换成 mp3，因为当时某个必须使用的业务软件只认 mp3。

那时候我找遍了各种转换工具。最后发现某款主流音乐软件自带的转换功能挺好用。然而，好景不长，在一次软件自动更新后，这个功能竟然被砍掉了。我去搜老版本安装包，却发现根本找不到安全的下载路径。

那种“被绑架”的无奈感，相信每个工具控都深有体会。

进阶：大名鼎鼎的 ffmpeg

郁闷之后，我转向了技术人的终极方案——ffmpeg。

命令行虽然硬核，但确实强大到无以复加。一条简单的指令就能解决所有问题：
ffmpeg -i input.m4a output.mp3

用了很长一段时间的命令行后，新的问题又来了，一次在外面，突然用户需要转换音频，我总不能随时随地都带着电脑吧？于是，我动了把 ffmpeg 搬进“豆子工具”的心思。

实现：极简架构下的“随时随地”

在小程序里实现这个功能，原理其实并不复杂，核心在于后端调度：

前端上传：小程序端选择 m4a 文件，上传至服务器。
后端处理：后端使用 Go 语言接收文件，通过 exec 模块调用服务器系统环境中的 ffmpeg 进程进行转换。
实时试听：为了保证体验，我在小程序里集成了一个音频播放器。转换前可以听一下是否选对了文件，转换后也可以即时试听确认效果。
即用即删：转换生成的文件在用户下载后会立即从服务器删除，既保护了隐私，也完全不占用宝贵的服务器存储空间。