search

qq15725 / modern-screenshot

šŸ“ø Quickly generate image from DOM node using HTML5 canvas and SVG
https://toolpkg.com/html-to-image
MIT License
504 stars 36 forks source link

Blank images in firefox due to duplicate css bloating size of rendered result #45

Closed perpil closed 8 months ago

perpil commented 1 year ago

I apologize for not being able to provide a repro via playground. I'm trying to take screenshots in the AWS Console of a relatively straight-foward svg within a div. It appears that modern-screenshot is embedding the full css multiple times into the resulting image making it too large for firefox to render. It is directly related to the number of lines in the svg, it will render fine with a few lines, but when there are more than 20 lines or so, the image it tries to render with css exceeds 30 MB and starts to fail.

The code I'm screenshotting looks like this:

<div class="logs__histogram"><div class="toolTip" style="pointer-events: none; left: 204.45px; display: none;"><div class="cwchart-histogram-tooltip-category">2023-08-28T14:53:00-07:00</div>
         <div class="cwchart-histogram-tooltip-value">4 matches</div></div><svg width="1102" height="90"><g class="my-brush" style="pointer-events: none;" transform="translate(40, 10)"><rect class="background" style="visibility: hidden; cursor: crosshair;" x="0" width="1002" height="60"></rect><rect class="extent" style="cursor: move; fill: rgb(120, 197, 197); opacity: 0.5;" x="178" width="11" height="60"></rect><g class="resize e" style="cursor: ew-resize;" transform="translate(189,0)"><rect x="-3" width="6" height="60" style="visibility: hidden;"></rect></g><g class="resize w" style="cursor: ew-resize;" transform="translate(178,0)"><rect x="-3" width="6" height="60" style="visibility: hidden;"></rect></g></g><g class="rects" transform="translate(40, 10)"><g class="x axis" transform="translate(0, 59)"><g class="tick" style="opacity: 1;" transform="translate(64,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle;" y="9" x="0">02:30</text></g><g class="tick" style="opacity: 1;" transform="translate(148,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle;" y="9" x="0">02:45</text></g><g class="tick" style="opacity: 1;" transform="translate(231,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle;" y="9" x="0">03 PM</text></g><g class="tick" style="opacity: 1;" transform="translate(315,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle;" y="9" x="0">03:15</text></g><g class="tick" style="opacity: 1;" transform="translate(398,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle;" y="9" x="0">03:30</text></g><g class="tick" style="opacity: 1;" transform="translate(482,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle;" y="9" x="0">03:45</text></g><g class="tick" style="opacity: 1;" transform="translate(565,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle;" y="9" x="0">04 PM</text></g><g class="tick" style="opacity: 1;" transform="translate(649,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle;" y="9" x="0">04:15</text></g><g class="tick" style="opacity: 1;" transform="translate(732,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle;" y="9" x="0">04:30</text></g><g class="tick" style="opacity: 1;" transform="translate(816,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle;" y="9" x="0">04:45</text></g><g class="tick" style="opacity: 1;" transform="translate(899,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle;" y="9" x="0">05 PM</text></g><g class="tick" style="opacity: 1;" transform="translate(983,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle;" y="9" x="0">05:15</text></g><path class="domain" d="M0,6V0H1002V6"></path></g><g class="y axis"><g class="tick" style="opacity: 1;" transform="translate(0,60)"><line x2="0" y2="0"></line><text dy=".32em" style="text-anchor: end;" x="-3" y="0">0</text></g><g class="tick" style="opacity: 1;" transform="translate(0,48)"><line x2="0" y2="0"></line><text dy=".32em" style="text-anchor: end;" x="-3" y="0">1</text></g><g class="tick" style="opacity: 1;" transform="translate(0,36)"><line x2="0" y2="0"></line><text dy=".32em" style="text-anchor: end;" x="-3" y="0">2</text></g><g class="tick" style="opacity: 1;" transform="translate(0,24)"><line x2="0" y2="0"></line><text dy=".32em" style="text-anchor: end;" x="-3" y="0">3</text></g><g class="tick" style="opacity: 1;" transform="translate(0,11.999999999999996)"><line x2="0" y2="0"></line><text dy=".32em" style="text-anchor: end;" x="-3" y="0">4</text></g><g class="tick" style="opacity: 1;" transform="translate(0,0)"><line x2="0" y2="0"></line><text dy=".32em" style="text-anchor: end;" x="-3" y="0">5</text></g><path class="domain" d="M0,0H0V60H0"></path></g><rect class="bar" x="0.13914734064713236" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="2.922094153589779" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="5.705040966532426" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="8.487987779475073" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="11.27093459241772" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="14.053881405360368" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="16.836828218303012" width="2.6437994722955143" y="48" height="12"></rect><rect class="bar" x="19.61977503124566" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="22.402721844188306" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="25.185668657130954" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="27.9686154700736" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="30.75156228301625" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="33.534509095958896" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="36.31745590890154" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="39.10040272184419" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="41.88334953478684" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="44.666296347729485" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="47.44924316067213" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="50.23218997361478" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="53.01513678655743" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="55.798083599500075" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="58.58103041244272" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="61.36397722538537" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="64.14692403832801" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="66.92987085127065" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="69.7128176642133" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="72.49576447715594" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="75.2787112900986" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="78.06165810304124" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="80.8446049159839" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="83.62755172892653" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="86.41049854186919" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="89.19344535481183" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="91.97639216775447" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="94.75933898069712" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="97.54228579363976" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="100.32523260658242" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="103.10817941952506" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="105.89112623246771" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="108.67407304541035" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="111.45701985835301" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="114.23996667129565" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="117.0229134842383" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="119.80586029718094" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="122.5888071101236" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="125.37175392306624" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="128.1547007360089" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="130.93764754895153" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="133.72059436189417" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="136.5035411748368" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="139.28648798777948" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="142.06943480072212" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="144.85238161366476" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="147.6353284266074" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="150.41827523955007" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="153.2012220524927" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="155.98416886543535" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="158.767115678378" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="161.55006249132066" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="164.3330093042633" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="167.11595611720594" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="169.89890293014858" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="172.68184974309125" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="175.4647965560339" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="178.24774336897653" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="181.03069018191917" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="183.8136369948618" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="186.59658380780448" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="189.37953062074712" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="192.16247743368976" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="194.9454242466324" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="197.72837105957507" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="200.5113178725177" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="203.29426468546035" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="206.077211498403" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="208.86015831134566" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="211.6431051242883" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="214.42605193723094" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="217.20899875017358" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="219.99194556311625" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="222.7748923760589" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="225.55783918900153" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="228.34078600194417" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="231.1237328148868" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="233.90667962782948" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="236.68962644077212" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="239.47257325371476" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="242.2555200666574" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="245.03846687960007" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="247.8214136925427" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="250.60436050548535" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="253.387307318428" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="256.17025413137065" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="258.95320094431327" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="261.73614775725594" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="264.5190945701986" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="267.3020413831412" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="270.0849881960839" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="272.8679350090265" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="275.65088182196916" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="278.43382863491183" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="281.21677544785445" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="283.9997222607971" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="286.7826690737398" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="289.5656158866824" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="292.34856269962506" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="295.1315095125677" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="297.91445632551034" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="300.697403138453" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="303.4803499513956" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="306.2632967643383" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="309.04624357728096" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="311.8291903902236" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="314.61213720316624" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="317.39508401610885" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="320.1780308290515" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="322.9609776419942" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="325.7439244549368" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="328.52687126787947" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="331.3098180808221" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="334.09276489376475" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="336.8757117067074" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="339.65865851965003" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="342.4416053325927" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="345.22455214553537" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="348.007498958478" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="350.79044577142065" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="353.57339258436326" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="356.35633939730593" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="359.1392862102486" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="361.9222330231912" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="364.7051798361339" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="367.4881266490765" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="370.27107346201916" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="373.05402027496183" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="375.83696708790444" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="378.6199139008471" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="381.4028607137898" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="384.1858075267324" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="386.96875433967506" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="389.75170115261767" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="392.53464796556034" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="395.317594778503" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="398.1005415914456" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="400.8834884043883" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="403.6664352173309" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="406.44938203027357" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="409.23232884321624" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="412.01527565615885" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="414.7982224691015" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="417.5811692820442" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="420.3641160949868" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="423.14706290792947" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="425.9300097208721" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="428.71295653381475" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="431.4959033467574" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="434.2788501597" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="437.0617969726427" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="439.84474378558537" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="442.627690598528" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="445.41063741147065" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="448.19358422441326" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="450.9765310373559" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="453.7594778502986" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="456.5424246632412" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="459.3253714761839" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="462.1083182891265" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="464.89126510206916" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="467.6742119150118" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="470.45715872795444" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="473.2401055408971" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="476.0230523538398" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="478.8059991667824" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="481.58894597972505" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="484.37189279266767" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="487.15483960561033" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="489.937786418553" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="492.7207332314956" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="495.5036800444383" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="498.2866268573809" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="501.06957367032356" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="503.85252048326623" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="506.63546729620884" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="509.4184141091515" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="512.2013609220942" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="514.9843077350369" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="517.7672545479794" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="520.5502013609221" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="523.3331481738647" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="526.1160949868074" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="528.8990417997501" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="531.6819886126926" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="534.4649354256353" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="537.247882238578" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="540.0308290515206" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="542.8137758644633" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="545.5967226774059" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="548.3796694903485" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="551.1626163032912" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="553.9455631162339" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="556.7285099291765" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="559.5114567421192" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="562.2944035550618" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="565.0773503680044" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="567.8602971809471" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="570.6432439938898" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="573.4261908068324" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="576.209137619775" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="578.9920844327177" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="581.7750312456603" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="584.557978058603" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="587.3409248715457" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="590.1238716844882" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="592.9068184974309" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="595.6897653103736" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="598.4727121233162" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="601.2556589362589" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="604.0386057492015" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="606.8215525621441" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="609.6044993750868" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="612.3874461880295" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="615.1703930009721" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="617.9533398139148" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="620.7362866268573" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="623.5192334398" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="626.3021802527427" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="629.0851270656854" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="631.868073878628" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="634.6510206915706" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="637.4339675045132" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="640.2169143174559" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="642.9998611303986" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="645.7828079433413" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="648.5657547562838" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="651.3487015692265" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="654.1316483821691" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="656.9145951951118" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="659.6975420080545" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="662.480488820997" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="665.2634356339397" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="668.0463824468824" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="670.829329259825" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="673.6122760727677" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="676.3952228857103" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="679.1781696986529" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="681.9611165115956" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="684.7440633245383" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="687.5270101374809" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="690.3099569504236" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="693.0929037633662" width="2.6437994722955143" y="0" height="60"></rect><rect class="bar" x="695.8758505763088" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="698.6587973892515" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="701.4417442021942" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="704.2246910151368" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="707.0076378280794" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="709.7905846410221" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="712.5735314539647" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="715.3564782669074" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="718.1394250798501" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="720.9223718927926" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="723.7053187057353" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="726.488265518678" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="729.2712123316206" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="732.0541591445633" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="734.8371059575059" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="737.6200527704485" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="740.4029995833912" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="743.1859463963339" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="745.9688932092765" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="748.7518400222192" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="751.5347868351618" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="754.3177336481044" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="757.1006804610471" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="759.8836272739898" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="762.6665740869324" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="765.449520899875" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="768.2324677128177" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="771.0154145257603" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="773.798361338703" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="776.5813081516457" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="779.3642549645882" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="782.1472017775309" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="784.9301485904736" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="787.7130954034162" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="790.4960422163589" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="793.2789890293014" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="796.0619358422441" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="798.8448826551868" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="801.6278294681294" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="804.4107762810721" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="807.1937230940147" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="809.9766699069573" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="812.7596167199" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="815.5425635328427" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="818.3255103457853" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="821.108457158728" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="823.8914039716706" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="826.6743507846132" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="829.4572975975559" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="832.2402444104986" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="835.0231912234412" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="837.8061380363838" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="840.5890848493265" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="843.3720316622691" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="846.1549784752118" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="848.9379252881545" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="851.720872101097" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="854.5038189140397" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="857.2867657269824" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="860.069712539925" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="862.8526593528677" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="865.6356061658103" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="868.4185529787529" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="871.2014997916956" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="873.9844466046383" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="876.7673934175809" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="879.5503402305236" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="882.3332870434662" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="885.1162338564088" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="887.8991806693515" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="890.6821274822942" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="893.4650742952368" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="896.2480211081794" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="899.030967921122" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="901.8139147340647" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="904.5968615470074" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="907.3798083599501" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="910.1627551728926" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="912.9457019858353" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="915.728648798778" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="918.5115956117206" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="921.2945424246633" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="924.0774892376058" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="926.8604360505485" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="929.6433828634912" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="932.4263296764339" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="935.2092764893765" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="937.9922233023191" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="940.7751701152617" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="943.5581169282044" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="946.3410637411471" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="949.1240105540898" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="951.9069573670324" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="954.689904179975" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="957.4728509929176" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="960.2557978058603" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="963.038744618803" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="965.8216914317456" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="968.6046382446882" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="971.3875850576309" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="974.1705318705735" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="976.9534786835162" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="979.7364254964589" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="982.5193723094014" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="985.3023191223441" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="988.0852659352868" width="2.6437994722955143" y="11.999999999999996" height="48"></rect><rect class="bar" x="990.8682127482294" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="993.6511595611721" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="996.4341063741147" width="2.6437994722955143" y="60" height="0"></rect><rect class="bar" x="999.2170531870573" width="2.6437994722955143" y="60" height="0"></rect></g></svg></div>

And visually it looks like this:

image

I've attached the gzipped img that modern-screenshot creates that firefox chokes on because it is too big. modern-screenshot.txt.gz I've also attached the main stylesheet from the AWS console that appears multiple times in the rendered image. styles.css.gz

There are probably a couple of ways to fix this:

  1. Embed the css once instead of per line
  2. Only embed the css that is actually used
  3. Add a filter that allows the developer to specify which css classes are embedded

Let me know if I can provide more info or help!

Steps To Reproduce

  1. Using Cloudwatch Insights in AWS i.e. https://us-west-2.console.aws.amazon.com/cloudwatch/home?region=us-west-2#logsV2:logs-insights

  2. Select a log file that has at least 50 lines at different timestamps and run a query like. limit 100 to display a histogram of the logs.

  3. Take a screenshot using domToPng on the div with class logs__histogram

Error Message & Stack Trace

```txt Log message ``` [modern-screenshot] Failed image load data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221082%22%20height%3D%2294.75%22%20viewBox%3D%220%200%201082%2094.75%22%3E%3Cstyle%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A.______background-clip--text%20%7B%0A%20%20background-clip%3A%20text%3B%0A%20%20-webkit-background-clip%3A%20text%3B%0A%7D%0A%40font-face%20%7B%20font-family%3A%20%22Amazon%20Ember%22%3B%20src%3A%20url(%22data%3Aapplication%2Fx-font-woff%3Bbase64%2Cd09GRgABAAAAAEbsABAAAAAAiagAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABbAAAABwAAAAcbjn2yEdERUYAAAGIAAAAMwAAADgFFwODR1BPUwAAAbwAAAw5AAAmVDGI9a5HU1VCAAAN%2BAAABNIAAAsi%2B2GWR09TLzIAABLMAAAAXQAAAGCIbG6MY21hcAAAEywAAAIRAAADDi4Vrc1nYXNwAAAVQAAAAAgAAAAIAAAAEGdseWYAABVIAAAl4AAAPiTZSEt1aGVhZAAAOygAAAA0AAAANgj8ZOJoaGVhAAA7XAAAACEAAAAkCA0ExmhtdHgAADuAAAACyAAABRyyMDbRbG9jYQAAPkgAAAJpAAACnivTHIRtYXhwAABAtAAAAB0AAAAgAV4Ao25hbWUAAEDUAAABvwAABKxfvqgQcG9zdAAAQpQAAAROAAAIR7QPcfl3ZWJmAABG5AAAAAYAAAAGXvJWqgAAAAEAAAAAzD2iā€¦ error { target: img, isTrusted: true, srcElement: img, eventPhase: 0, bubbles: false, cancelable: false, returnValue: true, defaultPrevented: false, composed: false, timeStamp: 47642, ā€¦ } ā€‹ bubbles: false ā€‹ cancelBubble: false ā€‹ cancelable: false ā€‹ composed: false ā€‹ currentTarget: null ā€‹ defaultPrevented: false ā€‹ eventPhase: 0 ā€‹ explicitOriginalTarget: ā€‹ isTrusted: true ā€‹ originalTarget: ā€‹ returnValue: true ā€‹ srcElement: ā€‹ target: ā€‹ timeStamp: 47642 ā€‹ type: "error" ā€‹ : function isTrusted() ā€‹ : EventPrototype { composedPath: composedPath(), stopPropagation: stopPropagation(), stopImmediatePropagation: stopImmediatePropagation(), ā€¦ }

Your Environment

perpil commented 1 year ago

Attached a minimal repro. If you load index.html in FF and click domToPng, it should fail: repro.tar.gz

perpil commented 10 months ago

I was playing with this some more today and noticed 2 things:

  1. The promise returned by modernScreenshot.domToPng doesn't reject on failure, it just generates a valid but empty png file. Is this the expected behavior, is there anyway to know if the operation failed?
  2. I couldn't find a way to modify the styles on the cloned node, if I add a onCloneNode method and modify the styles on the node, it still seems to use the original styles on the canvas. Am I doing this wrong? Is there any way to remove styles before it attempts to translate the node into a canvas?
perpil commented 8 months ago

I'm going to resolve this, I was able to use the includeStyleProperties in 4.4.36 to filter the styles and it is smoking fast and not bloated šŸŽ‰