search

qq15725 / modern-screenshot

📸 Quickly generate image from DOM node using HTML5 canvas and SVG
https://www.toolpkg.com/image/html-to-image
MIT License
457 stars 32 forks source link

Bug: an exception with SVG, and noscript element not removed, and other exceptions #71

Open qtqz opened 6 months ago

qtqz commented 6 months ago

Steps To Reproduce

在此页面截图：如何用通俗易懂的话来解释非对称加密? - 知乎

modernScreenshot.domToPng(document.querySelector('.AnswerCard'),{debug:true}).then(dataUrl => {
    const link = document.createElement('a')
    link.download = 'screenshot.png'
    link.href = dataUrl
    link.click()
  })

结果与预期不符：SVG公式没有显示，noscript标签错误地出现，最后的卡片链接margin auto失效（至于点赞栏的位置最好让我自己解决）

更多描述

第一个SVG显示异常是SVG使用了<use href="#MJMATHI-59" x="0" y="0"></use>，对应的defsSVG的CSS属性却为visibility: hidden;，被忽略了，在modern-screenshot可以复现。

<svg style="visibility: hidden;">
            <defs>
                <path stroke-width="1" id="MJMATHI-79"
                    d="M21 287Q21 301 36 335T84 406T158 442Q199 442 224 419T250 355Q248 336 247 334Q247 331 231 288T198 191T182 105Q182 62 196 45T238 27Q261 27 281 38T312 61T339 94Q339 95 344 114T358 173T377 247Q415 397 419 404Q432 431 462 431Q475 431 483 424T494 412T496 403Q496 390 447 193T391 -23Q363 -106 294 -155T156 -205Q111 -205 77 -183T43 -117Q43 -95 50 -80T69 -58T89 -48T106 -45Q150 -45 150 -87Q150 -107 138 -122T115 -142T102 -147L99 -148Q101 -153 118 -160T152 -167H160Q177 -167 186 -165Q219 -156 247 -127T290 -65T313 -9T321 21L315 17Q309 13 296 6T270 -6Q250 -11 231 -11Q185 -11 150 11T104 82Q103 89 103 113Q103 170 138 262T173 379Q173 380 173 381Q173 390 173 393T169 400T158 404H154Q131 404 112 385T82 344T65 302T57 280Q55 278 41 278H27Q21 284 21 287Z">
                </path>
            </defs>
        </svg>
<svg
xmlns:xlink="http://www.w3.org/1999/xlink" width="11.7ex"
height="2.725ex" viewBox="0 -905.6 5037.5 1173.4" role="img"
focusable="false" aria-hidden="true"
style="vertical-align: -0.622ex;">
<g stroke="currentColor" fill="currentColor"
stroke-width="0" transform="matrix(1 0 0 -1 0 0)">
<use xlink:href="#MJMATHI-79" x="0" y="0"></use>
</g>
</svg>

第二个是noscript标签未被移除，第三个是display: flex;margin: 16px auto;合用时，auto失效。，在modern-screenshot可以复现。

        <div style="width: 220px;background-color: #bbb;">
            <div style="width: 90px;margin: 16px auto;display: flex;background-color: #6cf;">o</div>
        </div>
<noscript><img src=""/></noscript>

Your Environment