Page2Img，一个可以在 Markdown 中“插入”网页的工具

前言

同大部分 V2EX 网友一样，我也苦于经常找笔记软件。一开始是 oneNote，但是不支持 Markdown 语法，就放弃了。

然后试用了 notion，一开始挺满意的；之后发现它不是完全的 MD 编辑器，因为它不支持`code`这样的语法，无法用反引号快速标记行内内容。更重要的是它不支持 ios10 （我并不想升级 ios，因为苹果垃圾）。

现在是在使用joplin。可以说几乎很是满意（虽然也有各种小问题）。拥有包含 linux 的全平台客户端，支持 E2EE，支付上传图片附件，开源免费。不用额外注册帐号，同步可以用 onedrive 等多种方式。（这里顺便宣传下 joplin ）

之后发现了个大问题，就是表格。MD 语法的表格修改起来太麻烦了，没有可视化表格（ notion 的数据库表格）方便。难道又要换会 notion ？

NO ！既然是大人的话，自然是全都要。我要在 joplin 的 MD 笔记中，“插入”notion 表格。

于是乎 Page2Img 应运而生。

介绍

项目地址： https://github.com/Eosxx/Page2Img

Page2Img其实是通过在服务器端运行puppeteer，将网页的内容以图片的形式返回。

那么自然可以想到的是，通过 p2i 将 notion 的表格页面转化为图片链接，再把图片链接，用 MD 语法插入到 MD 中。

使用

http://127.0.0.1:8080/img?w=1300&h=600&url=https://github.com/Eosxx/Page2Img

http://127.0.0.1:8080/img?url=https://github.com/Eosxx/Page2Img&s=.repository-content%20.gutter-condensed

例子：v2ex 今日热议

图片例子

接口

/img

• url 截取页面的网址，请带上https。建议使用encodeURIComponent进行编码，以对?等关键字进行编码，保证url中的参数能正确传递。
• w 返回的图片的宽度。
• h 返回的图片的高度。应用会把滚动条的部分一起截取，所以高度的设置在大部分情况下表现基本一致。图片的高度将由页面本身的高度决定。
• s 只截取页面中符合 css 选择器规则的内容。支持 css3 选择器所有规则，请使用$代替 ID 选择器的#。使用此参数时，w、h会被忽略。

注意

• 在一些单页网站上表现可能不佳。
• 基于部分网站的样式问题，比如html,body,#content{height: 100%} #content{overflow: auto}，可能会出现滚动条的内容截取不全的问题。这时候应该把参数h的值设置高一些。
• 图片的显示速度，是多方决定的。服务端通过 puppeteer 去下载网页内容，并截图；客户端再从服务端下载图片。

结语

需要明白的是 p2i 虽然也可以当作一个截图工具，但是它并不反应历史，它反应的是现在。

除非是在缓存期内，否则你访问到的图片，理论上应该是该网页的最新内容。因此建议不要将 p2i 当作剪藏工具。

现在笔记依然是 joplin 为主，notion 的表格为辅。我的表格很少有修改的时候，所以这一工具可以说是让我把 joplin 和 notion 整合到一起。

项目已经运行了几个月了，大致没发现问题。希望大家也能够开心使用。