V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
november
V2EX  ›  分享创造

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

  •  
  •   november · 2020-11-06 15:52:54 +08:00 · 1853 次点击
    这是一个创建于 1504 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言

    同大部分 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 选择器的#。使用此参数时,wh会被忽略。

    注意

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

    结语

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

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

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

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

    7 条回复    2020-11-06 17:46:30 +08:00
    qiayue
        1
    qiayue  
       2020-11-06 16:43:26 +08:00
    假设我发一个新帖子,插入了一张你这个服务的图片,对应的网页 URL 就是帖子的 URL,位置为正文区域,请问会不会形成递归套娃?
    november
        2
    november  
    OP
       2020-11-06 17:00:24 +08:00
    @qiayue 试了结果是,会超时而导致无法正常显示图片。
    lbyo
        3
    lbyo  
       2020-11-06 17:28:10 +08:00   ❤️ 1
    > 因为它不支持`code`这样的语法

    november
        4
    november  
    OP
       2020-11-06 17:33:33 +08:00
    @lbyo 啊,测试了下,它需要在 `` 前面加空格才能够识别。
    lbyo
        5
    lbyo  
       2020-11-06 17:36:22 +08:00
    @november #4 按照一些约定 /规范来说,中英文之间是应该用空格分隔
    unicloud
        6
    unicloud  
       2020-11-06 17:40:23 +08:00
    技术上没毛病,关键是体验如何?截一张网页图片,少则 3 、5 秒,多则 10 几秒( 20 、30 秒的也有),还不如先截好图,再插入 MD 。我写了个在线网页截图工具 https://www.dute.org/webpage-screenshot,也用到了 puppeteer,就我个人的使用体验来讲,截一张网页还是比较耗时的,还经常超时 -_-||
    november
        7
    november  
    OP
       2020-11-06 17:46:30 +08:00
    @lbyo 但是我平时使用的 markdown 编辑器,都没用空格分割就识别了。所以误以为 notion 不支持。


    @unicloud 确实比较耗时。但是如果先截图插入的话,后续对网页的更新,又要手动再一次截图了。如果交给服务器去截图的话,那么网页内容一更新,直接就可以在 MD 文件上看到效果(缓存期过后),代价就是慢。不过这对于一些非迫切浏览的内容,是可以接受的。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3520 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 00:51 · PVG 08:51 · LAX 16:51 · JFK 19:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.