Eine Menge modernen Web-Traffics (besonders in sozialen Netzwerken) besteht aus Screenshots von Webbrowsern. Dazu gehören normalerweise formatierter Text, ein Layout und einige Bitmap-/Vektorgrafiken. ZBSemantische Screenshots für Webbrowser

Es ist wirklich einfach einen Screenshot zu nehmen und mit anderen zu teilen, aber es wirft viele nützliche Informationen weg und überträgt sich nicht gut zwischen den Geräten (nicht wie Screen-Reader ist weit weniger zugänglich, um die Dinge zu erwähnen, für das blinde und ausgefallene Data-Mining). Der ironische Teil ist natürlich, dass HTML/SVG das perfekte Format für die Darstellung solcher Daten ist, und wir verwenden es nicht, obwohl es genau dort ist.

html2canvas kommt zu tun, aber nicht richtig behandelt Bilder, siehe einige semi-bezogene Diskussion here.

Meine Frage ist, wie kann ich einen sichtbaren Bereich in meinem Browser auswählen und in einem Format (im Idealfall HTML) speichern, das Text und Bilder beibehält und etwas ähnliches rendert, wenn es separat gerendert wird? (so dass es beispielsweise als ein Daten-Iframe zum Teilen enthalten sein könnte).

Ich weiß, dass dies im Allgemeinen unmöglich ist, und das Rendern von HTML ist eine komplizierte Aufgabe, aber ich denke, es sollte möglich sein, den Browser etwas wie "welche Elemente werden innerhalb dieser Pixel-Koordinaten gerendert?"

Quelle

2016-11-01 Sean D

Mögliche Blei: [Tools, um selektiv kopieren HTML + CSS + JS ..] (http://stackoverflow.com/q/4911338/5496966) – AA2992

Danke für den Link @AnkithAmtange hatte ich einen Blick und es scheint, dass alle diese Tools nur DOM-Elemente auswählen, also müssten Sie noch etwas tun, um den "Screenshot" zu bekommen, aber es ist ein guter Anfang. –

PhantomJS kann dies tun (siehe http://phantomjs.org/screen-capture.html). Du würdest es irgendwie in eine Erweiterung einpacken müssen, obwohl ich denke, dass so etwas nicht sehr nützlich wäre. Bilder werden auf jedem Gerät gleich dargestellt, und wenn Sie den Text extrahieren möchten, können OCR-Tools diese Aufgabe problemlos erledigen. Ich habe Ihr Bild durch http://www.onlineocr.net/ und bekam den größten Teil des Textes. –

Erstens:

Rechts auf Seite klicken, dann klicken Sie auf "Speichern unter".
Speichern Sie es mit einem Namen, der mit .html (oder .webarchive in einigen Szenarien endet. Sehen Sie, welche am besten für Sie funktioniert).
Bearbeiten Sie die jetzt gespeicherte HTML-Datei, um nur den gewünschten Teil zu haben (Sie können einen beliebigen Texteditor verwenden. Sublime Text und Atom werden normalerweise vorgeschlagen).

Dann:

Sie können es in Ihrem Browser öffnen, um zu sehen, was Sie sind bis zu.
Vielleicht möchten Sie auch überprüfen, wo die CSS ist, und holen Sie das in Ihrem HTML-Dateiordner, dann verknüpfen Sie die HTML-Datei damit, um die Stile zu erhalten.

Soweit ich verstehe, dann würden Sie alle CSS bringen wollen inline sein, oder zumindest in dem <head> Abschnitt der HTML-Datei, so dass Sie es als eine einzelne Datei hochladen und muss nicht weiter mit der CSS-Datei verknüpft werden.

Quelle

2016-11-10 00:01:08

Es tut mir leid, wenn ich die Frage unklar geschrieben habe, aber das ist überhaupt nicht das, was ich meinte. –

@SeanD Lemme wissen, wenn Sie es bearbeiten. –

Semantische Screenshots für Webbrowser

Antwort

Erstens:

Dann:

Verwandte Themen