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:552114Durchsuche
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
<!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()
var window = require('window/utils').getMostRecentBrowserWindow();
var tab = require('tabs/utils').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!