Firefox headless HTML to image

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.

A webkit másképp kezeli a képnek látszó hivatkozást és az egyéb src hivatkozást? Néhány ötlet:

• Ha te írod a képgeneráló php kódot, akkor meg tudod változtatni úgy, hogy az src hivatkozást a böngésző kép kiterjesztésűnek lássa, a szerver pedig előállítja a kép neve alapján.
• Az alt attr.-ról azt írják: "Omitting 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/Img

Ha 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.

• Nem-szerveren megteheted így: a python scriptben a "headless = False" legyen, és kommenteld ki a "self.close()" sort.
• Szerveren például úgy tudod megtenni, hogy a python scriptben a WebKit2.LoadEvent.FINISHED után még vársz egy kicsit. Változtatások: GLib hozzáadása az importhoz:
  

  from gi.repository import Gtk, Gdk, GLib, WebKit2

  és lejjebb változik az on_load_changed(), és új az on_timeout() metódus:

      def on_load_changed(self, web_view, load_state):
          print("Load-state:", load_state)
          if load_state == WebKit2.LoadEvent.FINISHED and not hasattr(self, "timeout_count"):
              self.timeout_count = 4
              Gdk.threads_add_timeout(GLib.PRIORITY_DEFAULT_IDLE, 1000, self.on_timeout)
      
      def on_timeout(self, *args):
          self.timeout_count -= 1
          if self.timeout_count > 0:
              print("Snapshot in ", self.timeout_count)
              return GLib.SOURCE_CONTINUE
          else:
              print("Taking snapshot ...")
              self.webview.get_snapshot(WebKit2.SnapshotRegion.FULL_DOCUMENT, snapshot_opts, cancellable=None, callback=self.on_snapshot_finish)
              return GLib.SOURCE_REMOVE

  ezek után a kimetet:

  Snapshot in 3
  Snapshot in 2
  Snapshot in 1
  Taking snapshot ...
  Snapshot ready

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:

from gi.repository import Gtk, Gdk, GLib, WebKit2

A Browser osztályt egészben közlöm:

class Browser(base):
    def __init__(self, uri):
        super(Browser, self).__init__()
        
        self.webview = WebKit2.WebView.new_with_context(ctx)
        self.webview.connect("load-changed", self.on_load_changed)
        
        # Uj sorok
        self.timer_ms = 500
        self.resource_count_total = 0
        self.resources_loading_set = set()
        self.webview.connect("resource-load-started", self.on_resource_load_started)
        
        self.webview.load_uri(uri)
        self.add(self.webview)

        self.connect("destroy", Gtk.main_quit)
        self.set_size_request(render_width, 600) # set minimum size allowed

        self.set_title("Bongeszo - " + uri)
        self.show_all()
    
    def restart_timer(self):
        self.remove_timer()
        
        # Start timer only if the page is "loaded" and all resource load is finished
        if not self.webview.props.is_loading and len(self.resources_loading_set) == 0:
            self.timer_id = Gdk.threads_add_timeout(GLib.PRIORITY_DEFAULT_IDLE, self.timer_ms, self.on_timeout)
    
    def remove_timer(self):
        print("\t\t\t\t\t\t\t\t(resources loading: ", len(self.resources_loading_set), ", webview loading: ", self.webview.props.is_loading, ")", sep="")
        
        if hasattr(self, "timer_id"):
            GLib.source_remove(self.timer_id)
            del self.timer_id
            
    # WebView events
    
    def on_resource_load_started(self, web_view, resource, request):
        print("Resource load STARTED :", resource.get_uri())
        resource.connect("finished", self.on_resource_finished)
        if resource.get_response() is None:
            self.resources_loading_set.add(resource)
        self.remove_timer()
        self.resource_count_total += 1
        
    def on_resource_finished(self, resource):
        print("Resource load FINISHED:", resource.get_uri())
        self.resources_loading_set.discard(resource)
        self.restart_timer()
        
    def on_load_changed(self, web_view, load_state):
        print("\nLoad-state:", load_state, "\n")
        self.restart_timer()
    
    def on_timeout(self, *args):
        print("Resources loaded total:", self.resource_count_total)
        print("No load activity for", self.timer_ms, "ms, taking snapshot ...")
        self.webview.get_snapshot(WebKit2.SnapshotRegion.FULL_DOCUMENT, snapshot_opts, cancellable=None, callback=self.on_snapshot_finish)
        return GLib.SOURCE_REMOVE
    
    def on_snapshot_finish(self, web_view, result):
        print("Snapshot ready")
        cairo_surf = web_view.get_snapshot_finish(result)
        cairo_surf.write_to_png(dst_png_path)
        print("Snapshot saved to", dst_png_path)
        self.close()

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

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Headless_mode

Ennek alapján `firefox -P screenshot -headless --screenshot https://hup.hu`