Kann mir jemand bei der Erstellung einer URL-Vorschau in JavaScript helfen?
Was ich meine, ist dies: Sagen wir, ich habe einen Link auf meiner Seite, ich möchte, dass der Benutzer mit der Maus über den Link gehen kann, und ein Popup-Bild zeigt, wie das Ziel des Links aussieht.
Mach dir keine Sorgen über das CSS, ich habe das funktioniert, ich brauche nur das eigentliche Skript, um das Bild zu zeigen.
Momentan mache ich es, indem ich ein iframe zeige, das die Seite tatsächlich rendert, aber das ist nicht skalierbar und sieht hässlich aus.
Die Anzeige von vorgefertigten Bildern auf der Seite ist keine Option, da die Links auf dynamisch generierte Benutzerinhalte verweisen.
Sie müssen vorab gespeicherte Bilder haben. Javascript kann keine Screenshots machen und die Größe der Bilder ändern (vorerst). Versuchen Sie Folgendes: Ссылка . Es nimmt Bilder dynamisch für Sie auf. Alles, was Sie tun müssen, ist die Bilder direkt zu verlinken:)
Die besten Funktionen bei der Verwendung von Ссылка :
Bilder sind garantiert auf dem neuesten Stand
Sie müssen sie nicht auf Ihrem Server speichern!
Free Plan hat viele Credits für Sie zu brennen!
Wenn Sie Ihre Screenshots direkter steuern möchten und Dinge auf dem Server konfigurieren möchten, können Sie khtml2png oder webkit2png * um Bilder in der Kommandozeile zu erzeugen. (Und hier ist eine Richtung in Richtung auf die Verwendung von Gecko, wenn Sie das bevorzugen.)
* webkit2png enthält Anweisungen für OS X, aber es gibt keinen Grund, warum es nicht mit * nix funktionieren sollte, da WebKit selbst plattformübergreifend ist. Das herauszufinden, kann dem Leser als Übung überlassen werden, aber es kann sich lohnen, da KHTML bei neuen (HTML5, CSS3, usw.) Funktionen hinter WebKit zurückgeblieben ist.
Ich habe keine dieser Lösungen getestet, aber es könnte ausreichen, um loszulegen, wenn Sie mehr Kontrolle über die Screenshotgenerierung haben wollen.
Website-Vorschauen können nicht auf der Client-Seite generiert werden. Das Vorschaubild muss auf dem Server gerendert werden, das dann mit einem einfachen <img> -Tag in Ihr HTML-Dokument aufgerufen werden kann.
Grundsätzlich könnte ein Bild-Tag wie das folgende aussehen:
%Vor% ... wobei my_preview_renderer.php die Vorschau in Echtzeit generiert und die Bilddaten mit dem passenden MIME-Typ zurückgibt. Sie können jede serverseitige Skriptsprache verwenden.
Dies ist keine erschöpfende Antwort, aber ich hoffe, dass Sie dadurch in die richtige Richtung weisen können.
Sie können dies mit einem iframe tun oder für einen Dienst bezahlen, der Screenshots macht (Doctype.com bietet das an, denke ich). Der kostenpflichtige Dienst wird noch lange dauern, um Screenshots zu erstellen. Im Grunde, versuche es nicht, es wird nicht funktionieren.
Nun, ich denke, da alle Antworten hier ein bisschen alt sind, können Sie dies jetzt mit den eingebauten Web-Kit-Tools in den meisten aktuellen Browsern tun, indem Sie webrtc oder ffmpeg-Tools nutzen, die in js verfügbar sind Minuten
Tags und Links javascript html preview