Tools zum Erfassen und Konvertieren des Webs

Erfassen Sie Website-Screenshots oder konvertieren Sie HTML in BilderNode.js API

Erstellen Sie perfekte Screenshots von Websites mit den folgenden Funktionen von GrabzIt's Node.js API. Bevor Sie jedoch anfangen, denken Sie daran, dass nach dem Aufruf der url_to_image, html_to_image or file_to_image Methoden der save or save_to Methode muss aufgerufen werden, um den Screenshot zu machen.

Grundlegende Optionen

Nur ein Parameter ist erforderlich, um einen Screenshot von einer Webseite oder zu machen HTML konvertieren into ein Bild wie im folgenden Beispiel gezeigt.

client.url_to_image("https://www.tesla.com");
//Then call the save or save_to method
client.html_to_image("<html><body><h1>Hello World!</h1></body></html>");
//Then call the save or save_to method
client.file_to_image("example.html");
//Then call the save or save_to method

Bild-Screenshot-Formate

Mit der Node.js-API von GrabzIt können Screenshots in verschiedenen Formaten erstellt werden, darunter JPG, PNG, WEBP, BMP (8-Bit, 16-Bit, 24-Bit oder 32-Bit) und TIFF. Das Standardformat fĂŒr Bild-Screenshots ist JPG. Unter diesen UmstĂ€nden ist die QualitĂ€t eines JPG-Bilds fĂŒr einige Anwendungen möglicherweise nicht gut genug. FĂŒr Screenshots wird das PNG-Format empfohlen, da es ein ausgewogenes VerhĂ€ltnis zwischen QualitĂ€t und DateigrĂ¶ĂŸe bietet. Das folgende Beispiel zeigt einen Screenshot, der im PNG-Format aufgenommen wurde.

var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"format":"png"};

client.url_to_image("https://www.tesla.com", options);
//Then call the save or save_to method
client.save_to("result.png", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});
var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"format":"png"};

client.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options);
//Then call the save or save_to method
client.save_to("result.png", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});
var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"format":"png"};

client.file_to_image("example.html", options);
//Then call the save or save_to method
client.save_to("result.png", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});

BrowsergrĂ¶ĂŸe

Die BrowsergrĂ¶ĂŸe bezieht sich auf die GrĂ¶ĂŸe des Browserfensters, das beim Aufnehmen des Screenshots verwendet wird. In den meisten FĂ€llen muss dies nicht festgelegt werden, da die Standard-BrowsergrĂ¶ĂŸe fĂŒr alle Aufgaben ausreicht. Wenn Sie jedoch die Breite und Höhe des Browsers festlegen möchten, wird unten ein Beispiel gezeigt.

var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"browserWidth":1024, "browserHeight":768};

client.url_to_image("https://www.tesla.com", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});
var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"browserWidth":1024, "browserHeight":768};

client.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});
var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"browserWidth":1024, "browserHeight":768};

client.file_to_image("example.html", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});

BildgrĂ¶ĂŸe Ă€ndern

Das Ändern der BildgrĂ¶ĂŸe ist einfach, ohne dass das Bild verzerrt wird, ist jedoch etwas schwieriger. Um den gesamten Vorgang zu vereinfachen, empfehlen wir, dies zu verwenden einfacher Bildmaßrechner.

Wenn Sie die Breite und Höhe des Bilds auf eine GrĂ¶ĂŸe erhöhen möchten, die grĂ¶ĂŸer als die Breite und Höhe des Browsers ist (standardmĂ€ĂŸig 1024 x 728 Pixel), mĂŒssen auch die Breite und Höhe des Browsers entsprechend erhöht werden.

Benutzerdefinierte Kennung

Sie können der einen benutzerdefinierten Bezeichner ĂŒbergeben Image Bei den folgenden Methoden wird dieser Wert an den Handler von GrabzIt Node.j zurĂŒckgegeben. Diese benutzerdefinierte Kennung kann beispielsweise eine Datenbankkennung sein, mit der ein Screenshot einem bestimmten Datenbankeintrag zugeordnet werden kann.

var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"customId":123456};

client.url_to_image("https://www.tesla.com", options);
//Then call the save method
client.save("http://www.example.com/handler", function (error, id){
    if (error != null){
        throw error;
    }
});
var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"customId":123456};

client.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options);
//Then call the save method
client.save("http://www.example.com/handler", function (error, id){
    if (error != null){
        throw error;
    }
});
var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"customId":123456};

client.file_to_image("example.html", options);
//Then call the save method
client.save("http://www.example.com/handler", function (error, id){
    if (error != null){
        throw error;
    }
});

Screenshot in voller LĂ€nge

GrabzIt ermöglicht es Ihnen, einen Screenshot in voller LĂ€nge einer gesamten Webseite zu machen, um dies zu tun, mĂŒssen Sie ein -1 an das ĂŒbergeben browserHeight Eigentum. Um sicherzustellen, dass das Bild der GrĂ¶ĂŸe des Browsers entspricht, ĂŒbergeben Sie ein -1 an das height und width Eigenschaften.

var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"browserHeight":-1,"width":-1, "height":-1};

client.url_to_image("https://www.tesla.com", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});
var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"browserHeight":-1,"width":-1, "height":-1};

client.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});
var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"browserHeight":-1,"width":-1, "height":-1};

client.file_to_image("example.html", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});

Sie können auch Miniaturansichten zurĂŒckgeben, die nicht zugeschnitten sind. Beachten Sie jedoch, dass dies zu großen Bildern fĂŒhren kann. Übergeben Sie dazu ein -1 an das height und / oder width Eigenschaften. Die Dimension, die als -1 ĂŒbergeben wird, wird nicht zugeschnitten.

var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"width":-1, "height":-1};

client.url_to_image("https://www.tesla.com", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});
var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"width":-1, "height":-1};

client.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});
var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

var options = {"width":-1, "height":-1};

client.file_to_image("example.html", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});
Beachten Sie, dass es keine Browser-Breite in voller LĂ€nge gibt!

Wenn Sie diese speziellen Werte verwenden, können Sie einen Screenshot erstellen, der eine Vollversion der gesamten Webseite ist, wenn Sie dies wĂŒnschen!

Machen Sie einen Screenshot eines Seitenelements

Mit GrabzIt können Sie einen Screenshot eines HTML-Elements wie z div or span Tag, und erfassen Sie den gesamten Inhalt. Dazu muss die ID oder Klasse des HTML-Elements, das Sie screenshoten möchten, als angegeben werden CSS-Selektor.

...
<div id="features">
	<img src="http://www.example.com/boat.jpg"/><h3>New Boat Launched</h3>
</div>
...

FĂŒr das folgende Beispiel wĂ€hlen wir das div mit der ID "features" aus und geben es als 250 x 250px JPEG-Bild aus.

var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

// The 250 parameters indicates that image should be sized to 250 x 250 px
var options = {"width":250, "height":250, "format":"jpg","target":"#features"};

client.url_to_image("http://www.bbc.co.uk/news", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});

Das nĂ€chste Beispiel zeigt einen weiteren Screenshot des Divs "features". Dieses Mal wird jedoch ein JPEG-Bild ausgegeben, das genau die GrĂ¶ĂŸe des Divs hat.

var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");

// The minus ones indicates that image should not be cropped
var options = {"browserHeight":-1, "width":-1, "height":-1, "format":"jpg", "target":"#features"};

client.url_to_image("http://www.bbc.co.uk/news", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
    //this callback is called once the capture is downloaded
    if (error != null){
        throw error;
    }
});