Heim > Artikel > Web-Frontend > Erfahren Sie, wie Sie gemeinsam Screenshots von Javascript-Webseiten erstellen

Erfahren Sie, wie Sie gemeinsam Screenshots von Javascript-Webseiten erstellen

coldplay.xixinach vorne: 2020-06-19 16:59:552178Durchsuche

Ich habe bereits darüber geschrieben, wie man Leinwandgrafiken in Bilder umwandelt und wie man Leinwandbilder herunterlädt. Dies sind alles technische Vorbereitungen für dieses Plug-in.

Der technische Weg ist sehr klar. Erstellen Sie ein Bild aus dem Inhalt eines bestimmten Bereichs der Webseite und speichern Sie es auf der Leinwand. Konvertieren Sie dann den Canvas-Inhalt in ein Bild, speichern Sie es lokal und schließlich Laden Sie es auf Weibo hoch.

Ich habe im Internet gesucht und html2canvas gefunden, ein Javascript-Tool, das Leinwandbilder aus dem Inhalt bestimmter Webelemente generieren kann. Die Verwendung dieses JS-Tools ist sehr einfach. Sie müssen lediglich seine JS-Datei in die Seite einfügen und dann die Funktion html2canvas()

html2canvas(document.body, {
    onrendered: function(canvas) {
        /* canvas is the actual canvas element,
           to append it to the page call for example
           document.body.appendChild( canvas );
        */
    }
});

aufrufen. Diese

-Funktion verfügt über Parameter, die übergeben werden Im obigen Beispiel ist der Parameter html2canvas(), wodurch das Bild der gesamten Seite erfasst wird. Wenn Sie nur einen Bereich erfassen möchten, beispielsweise einen Screenshot eines bestimmten document.body oder eines bestimmten p erstellen möchten, können Sie das table oder ein bestimmtes p als Parameter übergeben. table

Ich habe mich letztendlich nicht für das js-Tool html2canvas entschieden, da ich bei meinem Experiment mehrere Probleme damit festgestellt habe.

Zuallererst domänenübergreifende Probleme. Lassen Sie mich ein Beispiel geben, um dieses Problem zu veranschaulichen. Die URL meiner Webseite lautet beispielsweise http://www.webhek.com/about/ und ich habe ein Bild auf dieser Seite. Dieses Bild stammt nicht von www.webhek. com-Domäne. Es stammt vom CDN-Bildserver www.webhek-cdn.com/images/about.jpg. Dann befindet sich dieses Bild nicht in derselben Domäne wie diese Webseite, daher kann html2canvas keine Screenshots dieser Art von Bild erstellen Alle Bilder Ihrer Website werden auf einem separaten Bildserver abgelegt. Wenn Sie mit html2canvas einen Screenshot der gesamten Webseite erstellen, werden Sie feststellen, dass alle Bilder leer sind.

Es gibt auch eine Lösung für dieses Problem, nämlich die Verwendung eines Proxys:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html2canvas php proxy</title>
        <script src="html2canvas.js"></script>
        <script>
        //<![CDATA[
        (function() {
            window.onload = function(){
                html2canvas(document.body, {
                    "logging": true, //Enable log (use Web Console for get Errors and Warnings)
                    "proxy":"html2canvasproxy.php",
                    "onrendered": function(canvas) {
                        var img = new Image();
                        img.onload = function() {
                            img.onload = null;
                            document.body.appendChild(img);
                        };
                        img.onerror = function() {
                            img.onerror = null;
                            if(window.console.log) {
                                window.console.log("Not loaded image from canvas.toDataURL");
                            } else {
                                alert("Not loaded image from canvas.toDataURL");
                            }
                        };
                        img.src = canvas.toDataURL("image/png");
                    }
                });
            };
        })();
        //]]>
        </script>
    </head>
    <body>
        <p>
            <img alt="google maps static" src="http://maps.googleapis.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=12&size=800x600&maptype=roadmap&sensor=false">
        </p>
    </body>
</html>

Diese Methode kann nur auf Ihrem eigenen Server verwendet werden, wenn Sie einen Screenshot der Webseite einer anderen Person erstellen , es wird immer noch nicht funktionieren.

Während des Experiments haben wir außerdem festgestellt, dass mit html2canvas aufgenommene Bilder manchmal überlappenden Text aufweisen. Ich vermute, das liegt daran, dass html2canvas beim Parsen von Seiteninhalten und beim Verarbeiten von CSS nicht perfekt ist.

Schließlich habe ich die

-Methode auf der offiziellen Website von Firefox gefunden. Der Unterschied zwischen dieser Methode und dem oben erwähnten html2canvas besteht darin, dass sie keine Seitenelemente analysiert, sondern nur auf Regionen abzielt Die akzeptierten Parameter sind die mit vier Nummern gekennzeichneten Bereiche, unabhängig davon, wo sich in diesem Bereich Seiteninhalte befinden. drawWindow()

void drawWindow(
  in nsIDOMWindow window,
  in float x, 
  in float y,
  in float w,
  in float h,
  in DOMString bgColor,
  in unsigned long flags [optional]
);

Diese native JavaScript-Methode sieht perfekt aus und ist genau das, was ich brauche. Diese Methode kann jedoch nicht in normalen Webseiten verwendet werden, da Firefox offiziell festgestellt hat, dass diese Methode Sicherheitslücken verursacht. Nur Code mit „Chrome-Berechtigungen“ konnte diese

-Funktion verwenden. drawWindow()

Obwohl es große Einschränkungen gibt, kann es mit einigen Wendungen dennoch verwendet werden. In dem von mir entwickelten Firefox-Add-on-Plug-in ist main.js der Code mit „Chrome-Berechtigungen“. Ich habe im Internet ein Codebeispiel gefunden, das mit dem Firefox-Plug-in-SDK geliefert wird:

var window = require(&#39;window/utils&#39;).getMostRecentBrowserWindow();
var tab = require(&#39;tabs/utils&#39;).getActiveTab(window);
var thumbnail = window.document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
thumbnail.mozOpaque = true;
window = tab.linkedBrowser.contentWindow;
thumbnail.width = Math.ceil(window.screen.availWidth / 5.75);
var aspectRatio = 0.5625; // 16:9
thumbnail.height = Math.round(thumbnail.width * aspectRatio);
var ctx = thumbnail.getContext("2d");
var snippetWidth = window.innerWidth * .6;
var scale = thumbnail.width / snippetWidth;
ctx.scale(scale, scale);
ctx.drawWindow(window, window.scrollX, window.scrollY, snippetWidth, snippetWidth * aspectRatio, "rgb(255,255,255)");
// thumbnail now represents a thumbnail of the tab

Dieser Code ist sehr klar geschrieben und Sie müssen nur geringfügige Änderungen vornehmen, um ihn an Ihre Bedürfnisse anzupassen.

Empfohlenes Tutorial: „

Javascript-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonErfahren Sie, wie Sie gemeinsam Screenshots von Javascript-Webseiten erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:webhek.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Verwenden Sie JavaScript, um zu erkennen, ob der aktuelle Browser ein Headless-Browser istNächster Artikel：Verwenden Sie JavaScript, um zu erkennen, ob der aktuelle Browser ein Headless-Browser ist

In Verbindung stehende Artikel

Mehr sehen