当前位置：首页 > article >正文

自由开发者计划 004：创建一个苹果手机长截屏小程序

article 2025/8/24 3:12:28

一. 背景

年初，一个漂亮姐姐突然问我，iphone这么多年一直没法长截屏，你们程序员就没个办法把这个硬伤补上吗？
虎躯一震，脑瓜子嗡嗡的，这么多年的iphone资深用户，最初也不是没有想过这个问题，但这么多年下来被苹果教育得服服帖帖了。
漂亮姐姐话都说到这个份上了，哪怕没法直接给 ios 装补丁，但总也得曲线救国满足一下。
简单思考了一下，开始整活。

二. 功能设计

最开始计划只做一个苹果手机上截屏功能（不是不想给其他系统用户用，主要是人家真用不上啊，用指关节画个 S 就长截屏了，谁还打开小程序？）
后边想想，这样显得太傻了，或者是让漂亮姐姐感觉就是给她做的一样，人家不好意思用。

核心功能模块
智能长截屏
自动识别重复区域并去除
支持云端高精度拼接
本地算法兜底保障
基础拼接功能
上下拼接：垂直方向图片拼接
左右拼接：水平方向图片拼接
字幕拼图：电影字幕等特殊场景拼接
宫格拼图：多图网格布局拼接
图片处理工具
裁剪压缩：证件照裁剪、图片压缩
尺寸优化：智能压缩大文件

这么下来，进来琳琅满目，看着很厉害的样子。
搜索“拼图宝”小程序可以体验。
在这里插入图片描述

三. 开发实现

前端实现
框架选择：微信小程序原生开发
app.json：应用配置，包含9个功能页面
页面路由：index → longScreenshot → previewResult

后端实现
服务端架构：
语言：Python 3.x
核心库：OpenCV、NumPy
部署：云服务器 + 微信云函数

class SmartScreenshotStitcher:def __init__(self, similarity_threshold: float = 0.95):self.similarity_threshold = similarity_thresholddef find_common_borders(self, images: List[np.ndarray]):# 找到共同边界区域def find_best_overlap(self, img1: np.ndarray, img2: np.ndarray):# 基于像素相似度找到最佳重叠位置def stitch_images(self, image_paths: List[str]):# 执行智能拼接

四. 技术要点

图像处理算法
智能边界检测：
采用横向分块比较算法减少局部干扰
动态调整相似度阈值（默认95%）
支持最小重叠区域设置（50-400像素）
重复区域识别：
```
// 核心算法：基于像素差异的相似度计算
calculateRegionSimilarity(region1, region2) {const diff = cv.absdiff(region1, region2);const threshold = cv.threshold(diff, 20, 255, cv.THRESH_BINARY);return cv.countNonZero(threshold[1]) / (region1.rows * region1.cols);
}
```
多策略拼接：
优先使用云端高精度算法
本地Canvas算法兜底
支持手动调整模式

性能优化
内存管理：
离屏Canvas避免内存泄漏
图片压缩控制（10MB限制）
分批处理大量图片

// 智能压缩策略
async checkAndCompressImage(filePath) {const MAX_SIZE = 10 * 1024 * 1024; // 10MBif (fileSize > MAX_SIZE) {// 动态调整压缩质量const initialQuality = Math.min(80, Math.max(60, 100 - (fileSize / MAX_SIZE) * 20));// 最多3次压缩尝试}
}

Canvas优化：
设备像素比适配
最大尺寸限制（16000像素）
分段绘制大图

五. 其他坑

最开始我竟然只想着用纯前端实现，我算法调来调去，调来调去，重复区域的识别准确率很低；
稍微升级，用云开发环境，发现云开发环境用是微信自己的 cavas，不支持 opencv，呵呵了；
还是需要上后端服务器，果然“工欲善其事，必先利其器”，在微博，微信对话方面，准确率可以调到很高，当然对一些其他场景还是差点意思。但能解决微信对话长截屏预计就能解决 90% 用户问题，先 run 起来再说。
不过，如果拼得不准，一定需要让用户自己能手工微调一下。如果自己做得不好，还没有渠道给用户手工调，那坚决不是我的风格。所以“手工调整长截屏”功能页面随之产生。
手工调整长截屏这个页面，也确实花费了不少心思，一对一对长截屏，然后记录拼接位置，切图拼接。我个人反正是用着很好用。算是对自己算法不完美的地方，努力补救的证明。