格式转换

在“流量贵如油”的今天，作为一名自己买服务器、撸代码的站长，如何给服务器“减负”是每天都要思考的必修课。 痛点：博客网站的流量杀手 我有一个运行多年的个人博客。在分析服务器日志时发现，最大的流量开销并不是文字，而是文章里那些高清的图片。 虽然 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进行格式转换，转换成功后，下载文件到小程序本地，然后删除服务器端的文件。 ...

在“豆子工具”众多的功能里，音频转换（m4a 转 mp3） 是我使用频率最高、也最具有“个人救赎”色彩的一个。 起因：被软件更新“背刺”后的郁闷 这个功能的由来非常接地气：有一段时间，我需要频繁地将苹果手机录音产生的 m4a 格式文件转换成 mp3，因为当时某个必须使用的业务软件只认 mp3。 那时候我找遍了各种转换工具。最后发现某款主流音乐软件自带的转换功能挺好用。然而，好景不长，在一次软件自动更新后，这个功能竟然被砍掉了。我去搜老版本安装包，却发现根本找不到安全的下载路径。 那种“被绑架”的无奈感，相信每个工具控都深有体会。 进阶：大名鼎鼎的 ffmpeg 郁闷之后，我转向了技术人的终极方案——ffmpeg。 命令行虽然硬核，但确实强大到无以复加。一条简单的指令就能解决所有问题： ffmpeg -i input.m4a output.mp3 用了很长一段时间的命令行后，新的问题又来了，一次在外面，突然用户需要转换音频，我总不能随时随地都带着电脑吧？于是，我动了把 ffmpeg 搬进“豆子工具”的心思。 实现：极简架构下的“随时随地” 在小程序里实现这个功能，原理其实并不复杂，核心在于后端调度： 前端上传：小程序端选择 m4a 文件，上传至服务器。 后端处理：后端使用 Go 语言接收文件，通过 exec 模块调用服务器系统环境中的 ffmpeg 进程进行转换。 实时试听：为了保证体验，我在小程序里集成了一个音频播放器。转换前可以听一下是否选对了文件，转换后也可以即时试听确认效果。 即用即删：转换生成的文件在用户下载后会立即从服务器删除，既保护了隐私，也完全不占用宝贵的服务器存储空间。 下面是核心代码片段的注解，这是小程序端： <page-meta root-font-size="system" /> <view class="page"> <view class="weui-form"> <view class="weui-form__text-area"> <h2 class="weui-form__title">音频格式转MP3</h2> <view class="weui-form__desc">因微信限制，保存文件即为分享文件，可通过微信文件传输助手下载文件。目前仅支持以下格式（M4A、WAV、AMR）文件转换为MP3文件。</view> </view> <view class="weui-form__control-area"> <view class="weui-cells__group weui-cells__group_form"> <view class="weui-cells weui-cells_radio"> <view class="weui-cell weui-cell_active weui-cell_vcode weui-cell_wrap"> <view class="weui-cell__hd"><label class="weui-label">文件</label></view> <view class="weui-cell__bd"> <input class="weui-cell__control weui-cell__control_flex weui-input" type="text" placeholder="请选取5M内的音频" placeholder-class="weui-input__placeholder" value="{{filename}}" /> <view aria-role="button" class="weui-cell__control weui-btn weui-btn_default weui-vcode-btn" bindtap="chooseMedia">选择</view> </view> </view> <view class="weui-cell"> <view wx:if="{{audioExist}}"> <audio name="{{filename}}" src="{{filepath}}" id="myAudio" controls></audio> </view> <view wx:else><text>选择音频文件后可以在这里试听</text></view> </view> <view class="weui-cell"> <view wx:if="{{makeAudioExist}}"> <audio name="{{makeAudioName}}" src="{{makeAudioPath}}" id="myAudio" controls></audio> </view> <view wx:else><text>转换完成的文件会展示在这里</text></view> </view> </view> </view> </view> <view class="weui-form__opr-area"> <view class="button-sp-area"> <view class="weui-btn weui-btn_primary weui-wa-hotarea" aria-role="button" bindtap="audioConvert">开始转换</view> <view class="weui-btn weui-btn_warn weui-wa-hotarea" aria-role="button" bindtap="saveFile">保存文件</view> </view> </view> </view> </view> 上面是界面骨架，现在说下它的灵魂。首先通过小程序的上传文件API，wx.uploadfile将音频文件上传到服务器，然后使用Go调用ffmpeg进行格式转换，转换成功后，下载文件到小程序本地，然后删除服务器端的文件。 ...