Fórumok
Sziasztok!
Adott egy szerver, PHP előállít HTML állományokat, van hozzá külön CSS, szépen néz ki minden böngészőben. A feladat az, hogy a HTML DOM bizonyos DIV-jeiből képet készítsek, amely képeket a PHP program majd előnézeti ábrához felhasználna.
Próbáltam a Phantomjs-t, de értékelhetetlenül csúnya végeredményt adott. Nézem most a Firefox-ot, elvileg tud screenhot-ot készíteni URL alapján, de nem hajlandó ugyanezt megtenni ha file:///home/xyz/test.html-lel próbálkozom.
Teljesen tanácstalan vagyok, mi legyen a megoldás az előnézeti képek generálására a szerver oldalon.
Barátkozom a Google-val, de nem a barátom. Nem hiszem, hogy csak nekem lenne szükségem ilyen dologra.
Nektek lenne ötletetek?
Cz
Hozzászólások
http://html2canvas.hertzen.com/documentation
Ehhez node.js kell, ezt meg nem biztos, hogy fel tudom tetetni a szerverre.
A Firefox valamilyen módon történő irányítása nem járható út? Ez lenne most a legegyszerűbb, ha lenne ilyen mód.
Seleniumot nézted már? Gondolom a WebElement.takeScreenshot() fog érdekelni.
Most a Selenium IDE-t nézem, abban van egy Command mező, de speciel ez a függvény ott nem jön elő.
Mit nézek be?
A Selenium IDE kb. valami vicc, max. arra jó, hogy gyorsan ki tudj tölteni űrlapokat.
Ne selenium ide-t nézd! Az semmire nem való...
Rajk össze egy selenium grid-et.
https://github.com/eficode/Docker-Selenium-Example/blob/master/docker-compose.yml
codeception-on keresztül gyerekjáték elérni. Sőt itt még mozizni is tudsz egy vnc-n keresztül. Én sokszor használom népvakítása.
https://codeception.com/docs/modules/WebDriver
Majd itt használd a makescrenshot-ot
Tehat egy node.js-t tenni a szerverre macera, de full Firefox-ot, meg gtk-t, meg cairo-t, meg mi flancot nem?
Vagy pontosan hogyan is lenne a megoldas?
A végén még a node.js is lehet befutó, de jelenleg ismerkedem a témával. Két nappal ezelőttig azt se tudtam, hogy létezik a webkit2gtk és csomó remek dolgot lehet vele művelni, leszámítva épp azt, ami a feladat lenne :-) Keresgélek, csapongok, próbálom megérteni a programok működését, igyekszem felderíteni a dokumentációból a lényeget.
En inkabb tennek a server-re olyasmit, amit oda szantak (node.js), mint random browser-t. De ez csak egy lehetoseg, van meg sok mas is.
https://stackoverflow.com/questions/13158083/take-a-full-page-screenshot-with-firefox-on-the-command-line
hátha segít
> Nézem most a Firefox-ot, elvileg tud screenhot-ot készíteni URL alapján, de nem hajlandó ugyanezt megtenni ha file:///home/xyz/test.html-lel próbálkozom.
De localban miért nem egy a szerveredhez hasonló környezetben dolgozol, vagy legalább egy webszerveren? Aztán https://example.com.tld localban.
Szerk.:
Most esett le, hogy van ott PHP, stb. Miért a file:///home/xyz/test.html az útvonal?
Biztos, hogy nem én gonoszoltam le!
Csak próbálkozom, de van észszerűség abban, hogy http://-n keresztül érjem el a HTML állományokat. Jé. és tényleg :-)
No mármost, az a következő bajom, hogy a szerveren (Ubuntu 18.04) nincs grafikus környezet. Ha felteszem a firefox-ot, akkor magával húzza az ablakkezelőt is? Hogy kéne telepíteni a Firefox-ot, hogy minél kevesebb egyéb sallangot kelljen feltelepíteni?
Külön tenném egy szerver/VPS-re ha van rá lehetőség, mert tuti milliárd csomag kell egy ilyenhez, aztán ha a firefoxos szerver borul, nincs nagy gond.
Biztos, hogy nem én gonoszoltam le!
docker konténer pl.
bongeszo-kepmento.py
Usage: bongeszo-kepmento.py src_url dst_png_path render_width
Example: bongeszo-kepmento.py https://hup.hu hup-mentes.png 1200
További beállítások a programon belül: "headless" és "snapshot_opts"
Ha headless=True és a webkit-nek nem tetsző, nem komplett URI-t adtál, akkor "kill bongeszo-kepmento.py". (headless=False esetén elég Alt+F4 a megnyíló ablakon)
Telepítendő csomagok (Ubuntu 18.04.mai elnevezések):
Hűha :-) Ezen elálmélkodom egy kicsit.
Cz
Támadt némi hibaüzenetem:
Hogyan lehet ezt meggyógyítani?
Gtk.init(...) hívás okozza a gondot amikor X szervert keres. Alábbi linken azt írják kijelző nélküli gépen az xvfb vagy az xvnc csomagokat kell feltenni és elindítani (xvfb-run és hasonlóak).
https://stackoverflow.com/questions/11694278/using-gtk-without-display
Ez jó tanács volt, egy kicsit tovább tudtam jutni:
Úgy néz ki, ezzel van most baja:
Telepítettem egy python3-cairo csomagot, de semmi változás a kimenetben.
Mester, hogyan tovább? :-)
Akkor meg is válaszolnám a kérdésemet:
Ezeket kellett telepíteni, majd így futtatni:
Most már csak ez zavar, igaz, ne legyek telhetetlen :-) :
Cz
Közben annyit derítettem ki, hogy valahol itt ezek 'None' értéket adnak vissza:
wkhtml2pdf kiindulasnak?
wkhtml2pdf-hez (https://wkhtmltopdf.org/downloads.html) is kell az xvfb, ha esetleg azt szeretnéd használni
és a wkhtmltoimage parancsot használd a wkhtmltopdf helyett
Endi123 megoldását használom, de belefutottam egy jelenségbe: adott oldalon szerepel egy kép, amely nem közvetlen erőforrás hivatkozás, hanem egy képgeneráló URL, valami ilyesmi:
A HTML állomány elmentett képén pedig csak az alt érték jelenik meg, nem tölti le a képet.
Mester, segíts :-)
Ha megvan az előnézet amit szeretnél, akkor a képet külön töltsd le, és koordináta alapján helyezd a képet a képre, feltéve ha ismerhető az x,y.
Pythonban a Pillow segíthet.
Szerk.:
^ ha nincs más lehetőség.
Biztos, hogy nem én gonoszoltam le!
Én valami olyasmire vágynék, hogy a Webkit2.webview töltse le ezt a képet (várja meg, amíg letöltődik) és úgy készítsen virtuális képernyőmentést.
Már a WebKit2 különös bugyraiban járok:
https://lazka.github.io/pgi-docs/WebKit2-4.0/classes/Settings.html#
A webkit másképp kezeli a képnek látszó hivatkozást és az egyéb src hivatkozást? Néhány ötlet:
alt
altogether indicates that the image is a key part of the content and no textual equivalent is available. Setting this attribute to an empty string (alt=""
) indicates that this image is not a key part of the content". Mindez nekem azt sejteti, hogy ha kihagyod az alt-ot, akkor a kép "key part"-á válik, és ez talán kényszeríti a böngészőt a betöltésre. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ImgHa ezek nem jelentenek megoldást, akkor először is leellenőrízném hogy a webkit amúgy betölti az src képet ha hagyunk neki időt.
és lejjebb változik az on_load_changed(), és új az on_timeout() metódus:
ezek után a kimetet:
Ha az eddigiek nem jelentenek valamiféle megoldást, és ahogy írtad a webview settings beállításaival sem tudsz eredményt elérni, akkor javascript-ben lehetne a minden kép betöltődése eseményt elkapni (window.onload ?), és azt az eseményt pythonba továbbítani, de erről az irányról idő hiányában talán később.
Az alábbi módosítás sztem megoldja a problémát, lementi amit le lehet. Általánosságban a probléma hogy a mai weboldalak többségében js vezérli a betöltéseket (lazy loading, on-demand loading), ezért az "oldal betöltődése kész" esemény nehezen értelmezhető. Új resource betöltődése a LoadEvent.FINISHED esemény után! is történhet, szerencsére a webkit-et használó programban követhető az oldalhoz tartozó resource-ok betöltődési folyamata. Erre épül a következő módosítás (alapja az első hozzászólásom ), amely nem csinál képernyőmentést rögtön a LoadEvent.FINISHED után, ehelyett megvárja resource-ok betöltődését is.
Ahogy korábban most is hozzáadjuk a GLib-et az import-okhoz:
A Browser osztályt egészben közlöm:
A megértéséhez talán annyi elég, hogy ha a WebKit2.LoadEvent.FINISHED megvolt, és az utolsó resource is betöltődött, akkor elindít egy timer-t, amely self.timer_ms = 500 ideig vár. Ha a várakozás alatt új resource betöltés indul el, akkor a timer-t lelövi, később a betöltés befejezésekor újraindítja. Ha megszakítás nélkül lefut a timer, akkor menti a képernyőt és kilép.
Megjegyzés: a js lusta (kép)betöltést erősen használó oldalak, mint a youtube csak akkor töltenek be bizonyos képeket, ha lefelé görgeted az oldalt, sőt a görgetést figyelve akár bővítik is az oldalt. Ilyen esetek részben kezelhetőek azzal hogy a self.set_size_request(render_width, 600) sorban növeljük a 600-as height-et pár ezerre, vagy meg kell írni az szimulált (végig)görgetést.
Érdekesség, hogy a https://hup.hu cimlapjához a böngészőink 140 db resource-ot töltenek le, sok a google és a twitter. Itt a log vége:
Resource load STARTED : https://ton.twimg.com/tfw/assets/news_stroke_v1_78ce5b21fb24a7c7e528d22…
Resource load FINISHED: https://ton.twimg.com/tfw/assets/news_stroke_v1_78ce5b21fb24a7c7e528d22…
Resources loaded total: 140
No load activity for 500 ms, taking snapshot ...
Snapshot ready
Snapshot saved to hup.png
Privátban elküldöm a HTML oldalam pontos URL-jét.
Egyre kifinomultabb a programod, de sajnos még mindig nem tölti le a PHP által generált képet.
Láthatóan felismeri az erőforrást, de nem kezd vele semmit.
A korábban megfogalmazott ötleteidet végig jártam, de ott semmi változást nem tapasztaltam. Elkerülő úton sikerült megpatkolnom a szervert, hogy állomány szinten elérhető legyen a kép, de jobb lenne, ha sikerülne a webkit2gtk-val megoldani a nagy problémát.
Hogyan tovább?
Resource load STARTED : http://xyz.hu/artefact/file/download.php?file=8&view=6&time=1582701544 Resource load FINISHED: http://xyz.hu/artefact/file/download.php?file=8&view=6&time=1582701544&login
Összevetve a 2 kimeneti sort, látható hogy történt egy redirect. A fejlesztői gépen a böngésződben be lehetsz jelentkezve az oldaladra, ezért ott nem kapod a redirect-et a &login -ra. A képletöltő headless böngészők resource lekérése viszont át lesz irányítva, az img tag src hivatkozására egy html-t kapnak vissza, amivel helyesen nem kezd semmit.
A betöltési hibák kiszűrésére egy nagyon hasznos, mindenképpen ajánlott kiegészítés legutóbbi hsz-emhez, csak az on_resource_finished() változik - kiírja a választ:
Így mostmár a kimeneten az is látszik, hogy pl a css-re 404-et kapok (el van írva a kiterjesztés?), az img hivatkozásra pedig html-t:
Bocs, hogy telesírom ezt a fórumot a bajaimmal, de egyrészt ez megnyugtat :-), másrészt hátha akad kolléga, akinek lenne segítő gondolata. A fenti téma Google-keresése közben egyszerűsödött a kívánságom:
Van-e valami CLI megoldás a dinamikusan generált weboldalak letöltésére (esetleg WebKit2GTK python kóddal :-) )? Azt olvastam, hogy a wget, curl ugyan nem beszél javascript-tül, de nekem egy PHP kód ad vissza egy képet, azt kéne megvárnom, de nem biztatnak sok jóval. A legtöbb helyen a phantomjs-t ajánlják, amit elég régóta nem fejlesztenek és amikor kipróbáltam, hááát, nem volt valami szép a végeredmény, ráadásul hiányos volt a generált tartalom.
A Selenium felmerült, Firefox alá telepítettem a Selenium IDE-t, jópofa, csak pont nincs benne képernyőmentés.
Eddig a WebKit2GTK tűnik a legjobb megoldásnak, bár egyelőre ennek is vérzik a torka.
Valahogy nehéz elhinni, hogy tényleg ilyen rétegigényt fogalmaztam meg, senkinek nem volt szüksége arra, amire nekem. Vagy megoldják máshogy?
Üdv, Cz
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Headless_mode
Ennek alapján `firefox -P screenshot -headless --screenshot https://hup.hu`
Ha nem publikus oldal, akkor ez lesz a neked való: http://html2canvas.hertzen.com/
Ha publikus oldalról beszélünk, akkor itt havi 100-at ingyen lehet csinálni: https://www.screenshotmachine.com/pricing.php
html2canvas jó lesz oda. Már használtam, nincs vele gond.
pch
SB-soft online ügyviteli rendszer