[任务]: 把 github comment 转为图片

[trdthg]

如何认领

请直接在下方回复，我会把 issue 的 assignees 设置为你

认领者需要遵守以下要求

• 每周必须在评论中更新进度，无论是学习进度还是开发进度
• 如果两周内没人任何进展, 则认定为认领失败, assign 将被取消，可以由其他人认领
• 如遇到节假日等特殊情况，同步进度日期可以顺延

学习也算进展，所以小白不必担心

需求描述

由于 qq 群聊不支持 markdown 格式发送，将 issue 内容转换为图片效果可能会更好

编写函数
当传入 https://github.com/io-club/share/issues/6#issue-2607943948 这样的链接时
能够生成一张图片，把评论的文本内容转换为一张图片

实现方式

可以先忽略 markdown 表格，毕竟太复杂

• 方案1 markdown 转换成 html 网页，再利用浏览器打印实现
  • https://github.com/LolipopJ/mdimg
• 方案2 直接利用画布绘制 (简单的 2D 图形库)
  • https://github.com/wkhtmltopdf/wkhtmltopdf
  • skia 或者 cairo

文档资料

• https://github.com/LolipopJ/mdimg
• https://github.com/wkhtmltopdf/wkhtmltopdf
• https://github.com/google/skia
• https://www.cairographics.org/

难度

困难（工作量大，或技术方向困难）

能力要求

• markdown 转 html
• 2D 图形库使用，文字渲染

关闭 Issue 前请确认以下内容

• 代码已经上传：<PR 链接>
• 准备参加茶话会分享：<issue 链接>

[StevenRCE0]

很巧，我现在的团队也有 html 直接渲染出图的功能，现在的方案就是类似 mdimg 的 puppeteer 代理，会有很大的性能开销！
如果有兴趣从 MD parser 得到文档结构开始直接使用图形库进行绘制，得到 buffer，输出成图，会十分优雅。需要考虑的难点实际上在文字排版上（如果你选择的图形库没有很好的支持）。

[trdthg]

b 站转发视频下方的评论时会生成一张图片, 例如:

里面有各种文字，图片，布局。对应的功能似乎是 "自定义转发图片"

[StevenRCE0]

b 站转发视频下方的评论时会生成一张图片, 例如:

里面有各种文字，图片，布局。对应的功能似乎是 "自定义转发图片"

这种东西感觉是事实规范，应该有很多网站和现成的工具支持

[heky12356]

我来我来

[heky12356]

目前能有这种效果，用的是 gg 这个go的图形库，因为可以把字符串直接渲染成文字，比较方便。因为不用实现全部的样式，所以其实目前的思路比较简单，和之前机器人解析markdown一样，还是先把markdown文本一行一行读入，然后正则匹配，按照对应的格式再输出

[heky12356]

之后应该就是把一些细节的东西搞好一下，然后做成一个http的api接口，实现将github的url传入之后可以生成一个图片并返回

[trdthg]

看起来效果不错

• 希望能支持更多 Markdown 字体样式，例如: 大小，粗体, 斜体等
• 希望支持 markdown 引用
• 希望列表的样式能和 github 更接近一些

不知道行内的字体样式使用正则解析是否比较困难，使用一些 Markdown 解析库，例如 https://github.com/yuin/goldmark, 可能会方便一点

[heky12356]

• 如果是使用goldmark来先将markdowm内容转换成html之后再进行转换成图片，其实可以是用无头浏览器来实现
  • 本来是打算用cef2go，但失败了，貌似是因为这个库不支持了
  • 然后是打算用chrome浏览器和chromedp来实现。但是目前来说没有什么进展，之后可会再进行尝试。
• 如果说是直接用gg来绘制html，就是还是要用正则来匹配，个人感觉不如直接匹配markdown，现在匹配markdown的问题是正则匹配的效果不佳，会出错。

所以之后的努力方向大概就是还是延续之前的思路，然后手写正则来匹配，可能会参考goldmark的源代码。这样的话就是开发周期就会拉长。

[trdthg]

然后做成一个http的api接口，实现将github的url传入之后可以生成一个图片并返回

这些内容并不包括在这个任务里，这个任务的目标是一个独立的制作一个库，可以把 github comment 转为图片

gg 来绘制 html

2D 绘制的方案应该和 html 应该没有任何关系

现在匹配markdown的问题是正则匹配的效果不佳，会出错。

所以才建议使用 markdown 解析库

---

gg 库似乎已经多年没有维护，是否考虑使用前端 canvas 技术或者更好的选择？

回复时加点格式吧，一大段字密密麻麻看着好累

[heky12356]

目前情况

1. 目前还是用的gg，之后看一下要不要转为canvas
2. 使用goldmark来解析，并根据解析出来的节点来绘制

目前问题

1. 用gg绘制编写递归函数来处理行内样式不理想

之后方向

1. 尝试使用canvas替代gg
2. 重新编写递归逻辑

[StevenRCE0]

Canvas(like) 文字排版的一些小启发（实际上我考虑到的边界情况依然较少）
https://github.com/StevenRCE0/Overture/blob/0956e54a9116eaebd2f0c5853b331ac04c7d0bd9/src/workers/textProcess.ts
而 gg 反而不用考虑这些（虽然我也没看它实现的质量如何）

[heky12356]

目前情况

1. 递归的逻辑写的很顺利，不出意外的话接下来只要把解析出来不同的格式，按照对应的情况来写一下生成图像的函数就可以了

[heky12356]

目前情况

1. 正在编写drawtext，drawbold, drawlist，drawquote，drawitalic，来分别处理不同的类型的文字
2. 已经写完drawtext，表示的是正常的字体的输出，经测试可以和递归函数很好的结合，没有出错

[trdthg]

nice

但其实你没必要每天更新，一周（甚至两周）一次都可以的

[heky12356]

目前差不多这种效果

[heky12356]

目前问题
github获取的issue中的body是用\r\n来分行，不是纯markdown，之后应该要先处理一下这个数据，然后再进行转换

[trdthg]

我十分震惊，效果非常好!

• 不过有一个疑问，长文本换行是否有构思
  @StevenRCE0 提供的代码里似乎有考虑 [任务]: 把 github comment 转为图片 #17

[heky12356]

感谢，
目前还确实没有考虑过长文本换行，不过，我认为，这个可以在每次输出文字的时候同时判断一下当前的位置，如果处于边缘就换行

[heky12356]

[heky12356]

拿之前issue的样例来测试，主要的问题，应该有两个：

1. list前面的点没有加
2. 最后一段吞了两个url

[heky12356]

遇到的困难：
1.<https://github.com/io-club/IOGAS-QQ\>
像是上面那种用尖括号括起来的链接可以提取出节点，但是提取不出文字，然后现在在尝试将"<>"去掉，但是不知道会不会对其他的文本有影响，如果是用正则，应该不会影响到引用

[heky12356]

遇到的困难2

• 这种就是checkbox的形式也是解析不出来，准确的说被解析成了三个部分，三个list类型的node，现在想到的解决方法是在画list的text时加一个特判，如果有这种形式就画出对应的checkbox，但是还不知道有没有字体支持？还是直接画

[heky12356]

解决之后的效果

[StevenRCE0]

遇到的困难2

这种 flavoured markdown 一般会有 parser extension 来解决，比如：

https://github.com/yuin/goldmark/blob/d9c03f07f08c2d36f23afe52dda865f05320ac86/extension/tasklist.go

[heky12356]

https://github.com/heky12356/marktoimg
新建了一个仓库，已经上传
现在在想是作为module导入到机器人，还是做出httpapi的形式，目前的想法是做成api的形式，然后以后如果有问题了可以不用改机器人，直接改这个api就行

[heky12356]

遇到的困难2

这种 flavoured markdown 一般会有 parser extension 来解决，比如：

https://github.com/yuin/goldmark/blob/d9c03f07f08c2d36f23afe52dda865f05320ac86/extension/tasklist.go

有点复杂感觉，到时候学习一下，看能不能用上

[trdthg]

突然有个想法，能不能塞个 io logo 上去，或者水印，可能看着比较 nb

[heky12356]

确实好帅，我试一下

[heky12356]

目前

修改了iobot源代码，使结构更易于修改。添加getimg方法调用api获取图片。

之后方向

1. 继续更改iobot函数，使之完成发送图片任务
2. 修改api函数，添加对水印的支持

[heky12356]

目前
继续修改了iobot源代码。修改getimg方法

出现问题
调用qqbotapi发送图片出现困难

之后方向

1. 阅读文档，调整发送方法
2. 修改api函数，添加对水印的支持

[heky12356]

目前
成功发送图片，效果如下

之后方向

1. 调整细节
2. 修改api函数，添加对水印的支持

[heky12356]

[trdthg]

水印完成感觉已经差不多了，功能已经完全满足我们目前的需求

[heky12356]

目前

1. 调整了细节，iobot部分没有问题
2. 发现列表内嵌其他样式出现问题

之后方向

1. 打包新iobot然后上传服务器部署
2. 调整marktoimg的函数使支持水印，以及修改bug

[heky12356]

目前

1. iobot新版本上线
2. 完成对水印的添加
3. v1.0已发release
4. 出现列表bug，已修复
5. 出现内嵌bug暂未修复

之后方向

1. 修复内嵌bug

[heky12356]

目前

1. 添加自适应函数，当图片大小不足以覆盖全部内容时，自动调整画布大小
2. 发现列表嵌套列表难以解析

之后方向

1. 修复内嵌bug
2. 修复列表bug