puppeteer渲染图片相关

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

问题:

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

1 个赞

我不到,但是也许这里?


然后再 log 下 result 和 html

2 个赞

这是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那边有啥问题(

1 个赞

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

1 个赞


可以知道是因为使用 h("xxx") 会把 xxx 作为 type

渲染出 <xxx/>

1 个赞

:thinking:那该怎么做呢

2 个赞

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

1 个赞

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

2 个赞

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

1 个赞



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

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

2 个赞

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

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

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

应该就好了

1 个赞


这么写也炸了(

2 个赞

image

1 个赞

我敲真神奇,爱你(

2 个赞

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

2 个赞

加个 style 看看行不行?

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

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

2 个赞