如何将微信公众号文章截存长图

cenfun
1,900 阅读4分钟

需求

微信公众号有一些文章，比如一些图文教程，摄影集等文章，想把内容存成一个长图到本地，便于查看或分享。

安装工具

  • 先安装基础环境Node.js： nodejs.org/en/ 下载最新的14.x版本按默认安装即可
  • 安装截图的工具page-save-as, 打开命令窗运行下面命令
npm i page-save-as -g

安装好后，关闭命令窗，再打开新的命令窗，就可以运行psa这个命令

  • 开始截图命令
psa https://mp.weixin.qq.com/s/qBTUgtRDP9k7-FR50UBmBw --name image-name --type png

运行完成后，就会把上面的网页存成一个image-name.png的文件到当前目录下

仅第一页有内容？

截图是成功了，但打开图片发现内容并不完整，原来公众号的文章为了优化性能，并不会一打开就把全部内容都下载过来，它只会下载当前可视区域的图片内容，所以截图后也只有第一页是有图片的，要解决此问题就需要用到滚动截图

滚动截图

这里psa也提供了一个自动滚动的参数--scroll，会自动一屏一屏的滚动到最底部，最后再进行截图

psa https://mp.weixin.qq.com/s/qBTUgtRDP9k7-FR50UBmBw --name image-name --type png --scroll

这样截图消耗更多时间，但内容总算完整了 截图完的图片文件有10M，因为是png格式的无损压缩，这个对于摄影图片很好，因为不会失真，但如果对图片质量要求没那么高，我们可以用jpg格式，将--type参数改成jpg即可：

psa https://mp.weixin.qq.com/s/qBTUgtRDP9k7-FR50UBmBw --name image-name --type jpg --scroll

这样jpg文件只有5M，小了将近一半，其实还可以存成pdf格式

自动使用页面标题作为文件名

不指定文件名即可使用页面标题作为文件名，也可以不指定type，因为默认就是jpg类型

psa https://mp.weixin.qq.com/s/qBTUgtRDP9k7-FR50UBmBw --scroll

图片里有广告或者一些不相干的内容怎么去掉？

想去掉图片里一些不相干的内容，这里可以打开edit编辑模式，先编辑完再截图，添加一个--edit的参数即可：

psa https://mp.weixin.qq.com/s/qBTUgtRDP9k7-FR50UBmBw --scroll --edit

这些首先会滚动到底再回到顶部，然后就停住了，命令里提示按回车后才能继续截图，也就是这个时候，我们可以对内容进行编辑

如何编辑页面内容

因为截图使用的浏览器是Chromium浏览器，其实可以说就是谷歌浏览器，我们可以再浏览器按f12，打开浏览器的开发工具，在Elements这个tab里面（一般是第一个）就可以直接编辑html，发现哪个div的内容不需要，直接点击delete删除即可，也可以编辑修改里面的内容，这样广告项都可以被删除，不相干的内容也可以删除 最后，所有你需要的都编辑修改完了，再回到命令窗口，按一下回车即可完成截图

保存文件到特定的输出目录

默认保持到当前目录，可以指定一个输出目录，用--output参数

psa https://mp.weixin.qq.com/s/qBTUgtRDP9k7-FR50UBmBw --scroll --output my-folder

其他参数

如果你的页面打开速度很慢，可能需要用到--timeout

psa https://mp.weixin.qq.com/s/qBTUgtRDP9k7-FR50UBmBw --scroll --timeout 120

timeout是打开页面等多久超时，120就是120秒也就是2分钟 指定页面打开的宽度，可以用到--width

psa https://mp.weixin.qq.com/s/qBTUgtRDP9k7-FR50UBmBw --scroll --width 1920

Nodejs API

如果需要用到更多高级的操作，可以使用nodejs的API，比如提供更多图片的参数，以及pdf的参数

const PSA = require("page-save-as");
await PSA({
    url: "xxx",
    name: "xxx",
    type: "jpg/png/pdf"
});

更多参数见：github.com/cenfun/page…

截图原理

其实使用的是chromium的headless模式直接截图的，用的是谷歌官方提供的Puppeteer API，安装Puppeteer使用的是github.com/cenfun/pupp…

后话

其实微信公众号的文章只是一个例子，只要是网页都可以使用上面的方法截图 如果不使用edit编辑模式，可以在命令行直接截图，还有此可以可以跨平台，在linux服务器可以在命令行直接截图

avatar
文章
阅读
粉丝