尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

批量截图与长图拼接:自动化工作流的三种实现方案对比

批量截图与长图拼接:自动化工作流的三种实现方案对比 凌晨两点甲方甩来第三版需求要求把官网那 12 屏的长图文案截成一张能直接发朋友圈的长图。我手动截图拼了 40 分钟边缘还对不齐发过去又被打回缝隙太明显。那一刻我就决定这种重复到反人性的活必须交给脚本。后来我把批量截图 长图拼接做成了一套固定流程每天经手几十张素材图基本不用动手。下面把三种实现方案摊开讲清楚方便你按自己的场景挑。 文章目录为什么要把零散截图拼成长图方案一Playwright 自动化整页截图方案二命令行工具快速批量截方案三Python PIL 做长图拼接三种方案怎么选对比表实战把一屏屏素材拼成一张 一些踩坑思考一、为什么要把零散截图拼成长图先说清楚动机不然容易为自动化而自动化。素材归档收集竞品首页、设计稿、数据看板时单张截图散落文件夹检索靠翻拼成长图按项目 日期命名一眼就能回看上下文。教程与复盘写操作文档、做团队复盘长图比十几张碎图好读也方便贴进笔记软件。对比呈现把同一界面不同状态改前 / 改后纵向拼起来差异一眼可见不用在两张图之间反复横跳。痛点也很具体手动拼容易错位、留白不一致、导出体积失控。脚本的好处不是快一点而是每次结果都一样。二、方案一Playwright 自动化整页截图适合网页内容本身就要截的场景比如把某个后台页面、在线文档整页存下来。fromplaywright.sync_apiimportsync_playwright URLhttps://example.com/dashboardwithsync_playwright()asp:browserp.chromium.launch()pagebrowser.new_page(viewport{width:1440,height:900})page.goto(URL,wait_untilnetworkidle)# 先滚到底触发懒加载再截避免空白page.evaluate(window.scrollTo(0, document.body.scrollHeight))page.wait_for_timeout(800)page.screenshot(pathfull.png,full_pageTrue)browser.close()几个要点full_pageTrue一次截全但遇到懒加载要先滚动触发否则下半部分是空白。wait_untilnetworkidle比默认load更稳能等到图表、字体渲染完。固定viewport宽度保证多次截图尺寸一致后面拼接不费劲。这套方案的优点是可控性高能等元素、能注入样式、能屏蔽广告块缺点是依赖浏览器整页图体积偏大。三、方案二命令行工具快速批量截如果只是截屏幕或窗口不必起浏览器。macOS 用系统自带# 截取指定区域拖拽选择screencapture-sshot1.png# 截取某个窗口screencapture-wshot2.pngLinux 上scrot类似拼图用 ImageMagick 一行解决# 纵向拼接上到下convert shot1.png shot2.png shot3.png-appendlong.jpg# 横向拼接左到右montage shot*.png-tile1x-geometry00 long.jpg-append是纵向、append是横向montage还能控制间距和背景色。命令行方案的优点是轻、随手就能跑缺点是对网页整页懒加载无能为力且参数拼错容易把图弄变形。四、方案三Python PIL 做长图拼接已经有了一堆尺寸不一的图想把它们规整地拼成一张PIL 最稳。fromPILimportImage files[s1.png,s2.png,s3.png]imgs[Image.open(f).convert(RGB)forfinfiles]# 以最宽为基准左右留白居中纵向拼接Wmax(im.widthforiminimgs)gap12# 图片之间的细缝0 也行Hsum(im.heightforiminimgs)gap*(len(imgs)-1)canvasImage.new(RGB,(W,H),(255,255,255))y0foriminimgs:x(W-im.width)//2# 居中想左对齐就写 0canvas.paste(im,(x,y))yim.heightgap canvas.save(long.jpg,quality85)关键点高度不一致时先决定以谁为基准——居中还是左对齐统一就好看。gap留 0 是严丝合缝留几像素细缝反而更易读看用途。导出quality85的 JPG 通常够清晰体积比 PNG 小很多要无损再存 PNG。五、三种方案怎么选对比表维度Playwright命令行Python PIL典型用途网页整页截图屏幕 / 窗口截图已有图拼长图上手成本中低中可控性高低高输出体积偏大中可调适合频率偶发整页随手一截批量归档一句话建议网页内容用 Playwright 采屏幕内容用命令行截拼图统一交给 PIL三者串起来就是一条流水线。六、实战把一屏屏素材拼成一张把上面三者串成固定流程工作流长这样采集(Playwright/命令行) → 归一化(统一宽/格式) → 拼接(PIL) → 归档(按项目日期)我自己的习惯截图统一存raw/文件名带序号001.png。跑一个归一化脚本把宽度都缩到 1080格式统一成 JPG。PIL 纵向拼成long_YYYYMMDD.jpg。扔进本地素材库按项目归类下次回看直接搜文件名。注意 DPI 和字体跨设备截图有时 DPI 不同拼出来粗细不一归一化那步顺手重置 DPI 能少很多怪问题。 七、一些踩坑思考懒加载空白网页截图前务必先滚到底再等一会儿否则下半屏是空的。字体渲染差异不同机器默认字体不同需要精确还原就固定viewport和字体。拼接缝与错位手动拼最容易出现脚本里把gap和对齐方式写死结果才稳定。体积失控长图往往很大归档前按项目分类、必要时转 JPG检索和备份都轻松。别为自动化而自动化一次性两图硬写脚本反而慢流水线值得做的前提是这件事每周都要来几次。总结批量截图与长图拼接本质就是采集 — 归一化 — 拼接 — 归档四步。挑顺手的方案把重复活交给脚本省下的时间去做更值得的事。如果你也在折腾素材自动化度娘搜『影栈』能看到我做的桌面素材库欢迎交流。参考文献Playwright 官方文档截图 API 与full_page参数说明ImageMagick 官方文档convert/montage拼接用法Python Pillow 文档Image.new/Image.paste拼接接口备注以上为公开技术文档本文仅引用其方法名与参数正文不附外链。
返回列表