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 );
*/
}
});-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>-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] );
-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 tabJavascript-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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
