Fórum Root.cz

Hlavní témata => Software => Téma založeno: rado877 06. 10. 2022, 15:43:34

Název: Printscreen webu do formátu SVG
Přispěvatel: rado877 06. 10. 2022, 15:43:34
Zdravím, dělám printscreens naší webové aplikace, pokud použiji standartní tool na print screen je to uložené v jpeg nebo png, ale je to rastr, pří zmenšování nebo zvětšování písma písmo začne "pixelovat".

Ideální by bylo použít něco, co umí printscreen rovnou do svg.

Chrome, tam je třeba SVG Screenshot extension, kde lze označit plochu na stránce a přímo uložit do SVG, ale nefunguje to úplně 100% pokud má stránka nějak více UI elementů.

Má někdo zkušenost ? Díky
Název: Re:Printscreen webu do formátu SVG
Přispěvatel: Death Walker 06. 10. 2022, 17:01:02
Tak problem je hlavne v tom ze svg umoznuje vlozit bitmapu(ktorych je web plny) len ako referenciu. Tym padom sa ulozit ako svg stava zbytocne, nemalo by ziadne plus proti ulozit ako html...
Název: Re:Printscreen webu do formátu SVG
Přispěvatel: rado877 06. 10. 2022, 17:20:42
Tak problem je hlavne v tom ze svg umoznuje vlozit bitmapu(ktorych je web plny) len ako referenciu. Tym padom sa ulozit ako svg stava zbytocne, nemalo by ziadne plus proti ulozit ako html...

To si úplně nemyslím, je potřeba mít UI rendering engine s vektorovým backendem. Např. Gtk+ 3 to má. Mohlo by to fungovat, ale možná se pletu ....
https://github.com/nomeata/gtk-vector-screenshot
Název: Re:Printscreen webu do formátu SVG
Přispěvatel: Death Walker 06. 10. 2022, 17:23:20
Tak problem je hlavne v tom ze svg umoznuje vlozit bitmapu(ktorych je web plny) len ako referenciu. Tym padom sa ulozit ako svg stava zbytocne, nemalo by ziadne plus proti ulozit ako html...

To si úplně nemyslím, je potřeba mít UI rendering engine s vektorovým backendem. Např. Gtk+ 3 to má. Mohlo by to fungovat, ale možná se pletu ....
https://github.com/nomeata/gtk-vector-screenshot

Stale to ale nepredstavuje proti ulozit ako html nejaky benefit.
Název: Re:Printscreen webu do formátu SVG
Přispěvatel: Martin Poljak 06. 10. 2022, 18:43:31
Tak problem je hlavne v tom ze svg umoznuje vlozit bitmapu(ktorych je web plny) len ako referenciu. Tym padom sa ulozit ako svg stava zbytocne, nemalo by ziadne plus proti ulozit ako html...

To si úplně nemyslím, je potřeba mít UI rendering engine s vektorovým backendem. Např. Gtk+ 3 to má. Mohlo by to fungovat, ale možná se pletu ....
https://github.com/nomeata/gtk-vector-screenshot

Problém je jaksi v tom že to je backend Gtk+. Který ale opravdu nesouvisí s backendem prohlížeče, který velmi velmi velmi komplikovaně HTML a všechny související asety, navíc rozhýbané javascriptem a CSS animacemi, renderuje typicky pomocí grafické karty případně softwarovým rasterováním.
Název: Re:Printscreen webu do formátu SVG
Přispěvatel: tecka 06. 10. 2022, 22:06:21
Tak problem je hlavne v tom ze svg umoznuje vlozit bitmapu(ktorych je web plny) len ako referenciu. Tym padom sa ulozit ako svg stava zbytocne, nemalo by ziadne plus proti ulozit ako html...
A ta reference může být Data URL, takže není problém vkládat bitmapy přímo do SVG.
Název: Re:Printscreen webu do formátu SVG
Přispěvatel: tecka 06. 10. 2022, 22:08:32
Problém je jaksi v tom že to je backend Gtk+. Který ale opravdu nesouvisí s backendem prohlížeče, který velmi velmi velmi komplikovaně HTML a všechny související asety, navíc rozhýbané javascriptem a CSS animacemi, renderuje typicky pomocí grafické karty případně softwarovým rasterováním.
To není problém ani trochu a princip je úplně stejný. Rastrování není někde různě poházené, ale používá se centrální renderer, pracující s high-level informacemi a proto jde třeba tisknout do PDF a šlo by to i do SVG.
Název: Re:Printscreen webu do formátu SVG
Přispěvatel: qelurg 07. 10. 2022, 11:13:38
Tak problem je hlavne v tom ze svg umoznuje vlozit bitmapu(ktorych je web plny) len ako referenciu. Tym padom sa ulozit ako svg stava zbytocne, nemalo by ziadne plus proti ulozit ako html...

No to význam má, protože html se dá interpretovat dost volně. Ale imho není rozdíl mezi exportem do svg a pdf, kde export do pdf funguje výborně, takže nemá smysl řešit ho do svg.
Název: Re:Printscreen webu do formátu SVG
Přispěvatel: Filip Jirsák 07. 10. 2022, 11:48:34
Tak problem je hlavne v tom ze svg umoznuje vlozit bitmapu(ktorych je web plny) len ako referenciu. Tym padom sa ulozit ako svg stava zbytocne, nemalo by ziadne plus proti ulozit ako html...

No to význam má, protože html se dá interpretovat dost volně. Ale imho není rozdíl mezi exportem do svg a pdf, kde export do pdf funguje výborně, takže nemá smysl řešit ho do svg.
Není ten export do PDF rastrový nebo převážně rastrový? (Tedy takový export by samozřejmě šel udělat i do SVG, ale o to asi rado877 nejde.)
Název: Re:Printscreen webu do formátu SVG
Přispěvatel: qelurg 07. 10. 2022, 13:03:43
Text zůstává textem, což je to, co autor výslovně požaduje. A naopak, dokonce v něm jde vyhledávat, což by u SVG nešlo.
Název: Re:Printscreen webu do formátu SVG
Přispěvatel: rado877 07. 10. 2022, 16:40:49
Text zůstává textem, což je to, co autor výslovně požaduje. A naopak, dokonce v něm jde vyhledávat, což by u SVG nešlo.

Ano, je tomu tak.  U printscreens obrazovek na naší webové stránce, dochází v zavislosti na rozlišení obrazovky klienta k  upscaling nebo descaling obrázku, a pokud je v printscreen text, na některých rozlišeních degradace čitelnosti textu roste.

Můj dotaz byl, zda existuje nějaká možnost jak to zlepšit. Ideál je asi svg, tam je ostrost bez ohledu na rozlišení. Pdf možnost mne napadla také ale zatím jsem nezkoušel.
Název: Re:Printscreen webu do formátu SVG
Přispěvatel: Filip Jirsák 07. 10. 2022, 18:18:52
Můj dotaz byl, zda existuje nějaká možnost jak to zlepšit. Ideál je asi svg, tam je ostrost bez ohledu na rozlišení. Pdf možnost mne napadla také ale zatím jsem nezkoušel.
Pořád to dost motáte. To, že bude zachována ostrost u textu při zvětšování a zmenšování, závisí na tom, jestli ten text bude uložen jako text nebo alespoň vektorově. Což automaticky nezaručí použití vektorového formátu – jak do SVG tak do PDF se dají vložit i bitmapy. A vždycky záleží na tom, zda se vůbec do nástroje na vytvoření screenshotu dostane ta informace o textu (pokud dostane na vstupu vyrenderovaný raster, nic s tím neudělá) a také a tom, zda cílový formát podporuje dané zobrazení. Protože například pomocí CSS můžete na textu vytvořit efekty, které se v SVG reprezentovat nedají –  a pokud má screenshotovací nástroj udělat věrný obraz takové stránky, nezbude mu než to vyrenderovat do bitmapy.
Název: Re:Printscreen webu do formátu SVG
Přispěvatel: _Jenda 07. 10. 2022, 19:19:15
Pokud by stačilo zachování obsahu a nejde o zachování přesného vzhledu, co to vytisknout na virtuální PDF tiskárnu?
Název: Re:Printscreen webu do formátu SVG
Přispěvatel: rado877 07. 10. 2022, 23:57:30
nakonec jsem zkusil udělat ten tisk do pdf a z pdf konverzi do svg a zatím to nevypadá úplně špatně :-). Postup byl následující :
- otevřít požadovanou stránku v browseru
- v developer tool nastavit emulate CSS media na Screen , jinak by print do pdf vzal jenom css, zjistil jsem ze musim mit furt otevreny develper tool
- pak print - do pdf, v advanced setting zaškrtnout background graphics, a save
- pro konverzi pdf do svg jsem pouzil Inkscape
- ještě zkusím optimalizovat velikost svg, má to teď 600kb.
Zatím je výsledek lepší než jsem čekal ....
Název: Re:Printscreen webu do formátu SVG
Přispěvatel: Ondrej Nemecek 09. 10. 2022, 12:01:40
To samé se dá udělat pouhým tiskem do pdf, media type print se aplikuje automaticky. Následná konverze pdf do svg už podle mě nemá pro  smysl (většinu použití).
Název: Re:Printscreen webu do formátu SVG
Přispěvatel: Sox37 09. 10. 2022, 17:39:15
Opera to alespoň v roce 2018, kdy jsem to potřeboval, uměla. Byla to možnost normálně po pravém kliku někam do stránky a uložilo to celou stránku stejně, jako byla zobrazená (jen tuším někde trochu haprovaly gradienty). Po vytisknutí to vypadalo skvěle, text krásně ostrý.

https://techdows.com/2017/10/opera-50-save-page-as-pdf.html
Název: Re:Printscreen webu do formátu SVG
Přispěvatel: ByCzech 09. 10. 2022, 19:15:58
Chrome na to má doplněk:
https://chrome.google.com/webstore/detail/svg-screenshot/nfakpcpmhhilkdpphcjgnokknpbpdllg
Název: Re:Printscreen webu do formátu SVG
Přispěvatel: rado877 09. 10. 2022, 22:58:12
Chrome na to má doplněk:
https://chrome.google.com/webstore/detail/svg-screenshot/nfakpcpmhhilkdpphcjgnokknpbpdllg

V mém dotazu v úvodu jsem psal, že tohle funguje jen částečně. Ten postup přes pdf, co jsem psal výše funguje dobře.