puppeteer渲染图片相关

插件开发
1

代码：https://github.com/itzdrli/koishi-plugin-mc-server-status/blob/c7830ceb1fea729bd2f7063d9c5c2c414603fd4a/src/index.ts

问题：

  1. 最终渲染好的图片中，result中的motd相关内容被渲染后会在行始和行末多出<和/>
  2. 怎么限制最终成果图的高度和宽度？

image
image2560×624 48.7 KB

2 个赞
2

我不到，但是也许这里？

image
image996×245 28.9 KB

然后再 log 下 result 和 html

3 个赞
3

这是log出来的html和result

2023-07-23 10:45:28 [I] mc-server-status 
                              <!DOCTYPE html>
                              <html lang="en">
                              
                              <head>
                                <meta charset="UTF-8">
                                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                                <script src="https://cdn.tailwindcss.com"></script>
                              </head>
                              
                              <body class="bg-gray-900 text-white">
                                <div class="container mx-auto px-4 max-w-650 w-auto">
                                  <div class="bg-gray-800 rounded-lg shadow-lg p-8">
                                    <div class="text-center">
                                      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAIw0lEQVR4XuWbe1BU1x3HFzCISapjZ1LbTP5p0+dMp9NJTSUaE/OYvLWxiRqNcdLGaDQ+owlmWUQwCixPNUCVJtBE0UZiwoSXAjEjCBQVBJHHmCwGDQHkrYCC8uv5Xl3LnnP37r279641/mY+c3fOvbv39/ve8/jdc86aiMjEM9l8wP9+S8HL7JjOaBwVe5xMcdU3Hcz3umsxzBofeeQuPk4gFLCLZzJO3RZznHxjqwhH/odvFvgHx+L6Kx/vyMD9AoPzo/1v4oBdAUHuCyncilgFASZaChPwtH1kvvhDArV6UnB+jIMATJEX/dgJ/uIfKnjQiFkSYFzU0Qn8BbcK94YX325i7f4V/sStAqsF81H996Jd8CdvBVjsGSafuKph/oTR+DLu+6CONhY3086aTooqaaFJqfU0SuZaI2ECnDbxhUbz63+cpB3Hz5GcQYzfbT8pfMdQhAKD+MnWarJ89R0Vnb3Ax+1gOI+acfe2E8JvGIJQoDNj46tpQWYj5dp6+FgVLc/WSwuzvqVxCeJv6opQoBNIqB7+uIH21HbysWmyjIYueiL9FPnJ3EMXhAId+EVSDSVXyLdzd21H5Tmp/+Dv5TFCgQf8mFXXdV+eddnO3TX8buihZrpri3hvtxEK3GB0XBX95ZOv6eCZ87zPhhiEmL3vGxoTp0P+IhRoZOKHdZRa1c776BXDsBmYVu/ZC5xQoJKfs3aeUN6qWN2Hh4fdQquhv/llspv9g1DgAmRxC7NO08Em59X9eGUlhYeFkcVsppAQi2bWh4RQWNgGiom20q6dO6mysoIuXryoKA6a37K8Ju3ZpFDggncKz/L3drDLly+T1Wqll+fOpfnz3Mf+/QWvzKeVK5ZTWuqHdP68c9Hthk6S91kRoUABVDOlKg/DU4IISk9Liw1fuUKDg4N06dIl/pSswb...
                                    </div>
                                    <div class="text-center mt-4">
                                      <div class="text-lg font-bold text-white"><p>Server blocksmc.com Status: Online</p><p>Version: 1.7.x-1.20.x</p>MOTD: <p/> <<span style="color: #FFFFFF">                      </span><span style="color: #FFAA00">✴ </span><span style="color: #55FF55"><span style="font-weight: bold;">Blocks</span></span><span style="color: #FFFF55"><span style="font-weight: bold;">MC </span></span><span style="color: #FFAA00">✴</span>/> <p/> <  <span style="color: #FFFF55"><span style="font-weight: bold;">NEW GAMES: </span></span><span style="color: #AA00AA"><span style="font-weight: bold;">Murder</span></span><span style="color: #555555"><span style="font-weight: bold;">Mystery </span></span><span style="color: #FFFF55"><span style="font-weight: bold;">&amp; </span></span><span style="color: #AA0000"><span style="font-weight: bold;">TNT</span></span><span style="color: #FFFFFF"><span style="font-weight: bold;">Tag</span></span>/><p>Players: 2631/10000</p></div>
                                    </div>
                                  </div>
                                </div>
                              </body>
                              
                              </html>
                              
                              
2023-07-23 10:45:28 [I] mc-server-status <p>Server blocksmc.com Status: Online</p><p>Version: 1.7.x-1.20.x</p>MOTD: <p/> <<span style="color: #FFFFFF">                      </span><span style="color: #FFAA00">✴ </span><span style="color: #55FF55"><span style="font-weight: bold;">Blocks</span></span><span style="color: #FFFF55"><span style="font-weight: bold;">MC </span></span><span style="color: #FFAA00">✴</span>/> <p/> <  <span style="color: #FFFF55"><span style="font-weight: bold;">NEW GAMES: </span></span><span style="color: #AA00AA"><span style="font-weight: bold;">Murder</span></span><span style="color: #555555"><span style="font-weight: bold;">Mystery </span></span><span style="color: #FFFF55"><span style="font-weight: bold;">&amp; </span></span><span style="color: #AA0000"><span style="font-weight: bold;">TNT</span></span><span style="color: #FFFFFF"><span style="font-weight: bold;">Tag</span></span>/><p>Players: 2631/10000</p>

然后我也不到motd那边有啥问题（

2 个赞
4

可以发现渲染前就多了 < 和 />

2 个赞
5

image
image2448×433 40.2 KB

可以知道是因为使用 h("xxx") 会把 xxx 作为 type
image
image2471×387 60.4 KB

渲染出 <xxx/>

2 个赞
6

:thinking:那该怎么做呢

3 个赞
7

不用 h() 就好了
就这两行

image
image1101×143 44.8 KB

1 个赞
8

但是不用h我不知道咋渲染html（
如果直接扔进去render的话出来的结果是直接不渲染就放出来了

2 个赞
9

data.motd.html[…] 不已经是 html str 了吗（

1 个赞
10

image
image2560×904 305 KB

image
image1126×1073 72.9 KB

我直接这么写的话就会这样（

然后问了神奇的gpt给出答案让我用h

3 个赞
11

emmm h('p', data.motd.html[…])

应该是是因为这边 session.text 转 escaped 了

result += h.unescape(session.text('motd', [motdl1, motdl2]))

应该就好了

2 个赞
12

image
image745×182 57.3 KB

这么写也炸了（
image
image2560×904 305 KB

2 个赞
13

image

2 个赞
14

我敲真神奇，爱你（

3 个赞
15

但是那个显示渲染结果的宽度你知道该咋限制嘛（
文档没写

3 个赞
16

加个 style 看看行不行？

<body style="width: 114514px; height: 114514px">
  ...
</body>
3 个赞
17

我敲把这个忘了（前端知识基本为0

3 个赞