Ist es möglich, einen Screenshot des gerenderten DOM auf der Serverseite zu machen?

Question

In meiner Webanwendung kann der Benutzer einige HTML/CSS Markups erstellen, die in meiner Datenbank gespeichert sind. Ich möchte ein "Thumbnail" für dieses Markup anbieten, zum Beispiel in der Übersichtsansicht.

Da das Thumbnail ungefähr bei 200x200px liegen sollte und das ursprüngliche Markup bei ungefähr 900x900px angezeigt werden soll, muss ich eine Möglichkeit finden, dieses Markup zu 'skalieren': Es sollte so aussehen, als hätte ich einen Screenshot des gerendert Markup bei 900px und skaliert es auf 200px herunter.

Weiß jemand, ob dies mit JavaScript oder PHP möglich ist? Oder vielleicht eine andere serverseitige Sprache? Ich möchte vermeiden, irgendwelche Drittanbieter-Applets wie ActiveX zu verwenden.

Edit: Ich denke, eine Art von Mashup, wo der Screenshot auf der Client-Seite genommen wird, und dann an den Server gesendet würde auch OK sein.

Answer 1

Sie können WKHTMLTOPDF verwenden. Es hat auch die Funktionalität, Bilder mit dem Namen WKHTMLTOIMAGE zu speichern (ich denke, das ist eine andere Distribution, aber Sie können es von demselben Link herunterladen). Sie können es mit exec() von PHP als Systemaufruf ausführen. Unter Verwendung eines virtuellen Puffers wie xvfb können Sie den WKHTMLTOIMAGE Headless auf dem Server ausführen. Es basiert WebKit so die produzierten Ergebnisse sind wirklich gut ...

Sie können das resultierende Bild mit Standard-PHP-Funktionen skalieren wie zum Beispiel in diesen Beiträgen beschrieben:

• dynamically scale images in php jpg/png/gif
• Resize image using PHP if it's too small

Vielleicht möchten Sie meine Antwort auf diese Frage HTML2PDF in PHP - convert utilities & scripts - examples & demos überprüfen, vielleicht hilft es Ihnen auch.

Answer 2

Die beste Lösung besteht darin, den Job in zwei Teile aufzuteilen: einen Screenshot erstellen und auf 200x200 herunterskalieren. Für den ersten Teil benötigen Sie ein Befehlszeilentool oder eine Bibliothek, die HTML direkt in eine Bitmap-Datei (wahrscheinlich PNG) rendern kann. Ich weiß nicht, dass es einen Moment dauern wird, aber wenn du wirklich entschlossen bist, bin ich mir sicher, dass ich einen kleinen Wrapper rund um Webkit und Libpng erstellen sollte, sollte nicht zu schwer sein, wenn du weißt, was du tust. Für die Skalierung können Sie entweder gd (konfiguriert für die meisten PHP-Setups) oder ImageMagick (leistungsstärker) verwenden. Sobald Sie diese zwei haben, ist es nur eine Frage des Schreibens der richtigen Kleber, um sie zusammenzufügen.

Answer 3

Kurz gesagt, es gibt keine "einfache" Möglichkeit, dies zu tun.

Dies ist jedoch nur ein Duplikat Website screenshots using PHP

Answer 4

Wenn Sie einen Screenshot von nehmen wollen, was der Benutzer sieht man zwangsläufig einige clientseitige Technologie verwenden. Ich denke, du solltest das mit Flash machen können.

Diese Antwort sollten Sie wahrscheinlich helfen: Using HTML5/Canvas/JavaScript to take screenshots

Andernfalls könnten Sie versuchen, eine ähnliche Ansicht auf der Server-Seite zu „neu“, unter Verwendung von zum Beispiel WKHTMLTOPDF (Wie Michal schon sagt).

Answer 5

Ja, das ist möglich, und ich habe sogar eine Lösung mit einem PHP-Frontend als Service-Einstiegspunkt implementiert. Die eigentliche Arbeit wird von PhantomJS/Xvfb behandelt, wo die Seite gerendert wird, dem Javascript, das sie ausführt (sehr wichtig bei allen dynamisch erzeugten Inhalten im Web).

Grundsätzlich PhantomJS und die Xvfb Framebuffer machte dies eine sehr einfache Aufgabe, überprüfen Sie mehr hier: http://code.google.com/p/phantomjs/ und hier http://skookum.com/blog/dynamic-screenshots-on-the-server-with-phantomjs/

Prost

Answer 6

I ABCpdf von http://www.websupergoo.com/ dafür verwendet haben, scheint hübsch zu arbeiten gut, aber es ist ein kommerzielles Produkt, obwohl es mit einer kostenlosen Probezeit kommt. Ich bin nicht mit dieser Firma verbunden.