Twórz idealne zrzuty ekranu ze stron internetowych, korzystając z następujących funkcji GrabzIt's Node.js API. Jednak zanim zaczniesz, pamiętaj, że po wywołaniu url_to_image, html_to_image or file_to_image metody save or save_to należy wykonać metodę, aby wykonać zrzut ekranu.
Do zrobienia zrzutu ekranu strony internetowej lub wymagany jest tylko jeden parametr przekonwertować HTML into obrazie jak pokazano w poniższym przykładzie.
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
Interfejs API Node.js GrabzIt może wykonywać zrzuty ekranu w kilku formatach, w tym JPG, PNG, WEBP, BMP (bit 8, bit 16, bit 24 lub bit 32) i TIFF. Domyślnym formatem zrzutów ekranu jest JPG. Jednak jakość obrazu JPG może nie być wystarczająca dla niektórych aplikacji. W takich okolicznościach zalecany jest format PNG do zrzutów ekranu obrazów, ponieważ zapewnia dobrą równowagę między jakością a rozmiarem pliku. Poniższy przykład pokazuje zrzut ekranu wykonany w formacie PNG.
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; } });
Rozmiar przeglądarki odnosi się do rozmiaru okna przeglądarki, które będzie używane podczas przechwytywania zrzutu ekranu, w większości przypadków nie trzeba go ustawiać, ponieważ domyślny rozmiar przeglądarki będzie wystarczający dla wszystkich większości zadań. Jeśli jednak chcesz ustawić szerokość i wysokość przeglądarki, przykład pokazano poniżej.
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":1366, "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":1366, "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":1366, "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; } });
Zmiana rozmiaru obrazu jest łatwa, robienie tego bez zniekształcania obrazu jest nieco trudniejsze. Aby uprościć cały proces, zalecamy skorzystanie z tego prosty kalkulator wymiarów obrazu.
Jeśli chcesz zwiększyć szerokość i wysokość obrazu do rozmiaru większego niż szerokość i wysokość przeglądarki, którym domyślnie jest 1366 na piksele 728, szerokość i wysokość przeglądarki również muszą zostać zwiększone, aby pasowały.
Możesz przekazać niestandardowy identyfikator do obraz metody pokazane poniżej, ta wartość jest następnie zwracana do modułu obsługi GrabzIt Node.js. Na przykład ten niestandardowy identyfikator może być identyfikatorem bazy danych, umożliwiając skojarzenie zrzutu ekranu z określonym rekordem bazy danych.
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; } });
GrabzIt pozwala zrobić pełny zrzut ekranu całej strony internetowej, aby to zrobić, musisz przekazać -1 do browserHeight
własność. Aby upewnić się, że obraz odpowiada rozmiarowi przeglądarki, przekaż -1 do height
i width
Właściwości.
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; } });
Możesz także zwracać miniatury, które nie są przycięte, ale uwaga: może to powodować tworzenie dużych obrazów. Aby to zrobić, przekaż -1 do height
i / lub width
nieruchomości. Wymiar przekazany przez -1 nie zostanie przycięty.
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; } });
Użycie tych specjalnych wartości oznacza, że możesz utworzyć zrzut ekranu, który jest pełnowymiarową wersją całej strony, jeśli chcesz!
GrabzIt pozwala wykonać zrzut ekranu elementu HTML, takiego jak div
or span
i przechwyć całą jego zawartość. Aby to zrobić, element HTML, który chcesz zrzut ekranu, musi być określony jako Selektor CSS.
... <div id="features"> <img src="http://www.example.com/boat.jpg"/><h3>New Boat Launched</h3> </div> ...
W poniższym przykładzie wybierzemy div z identyfikatorem „funkcje” i wyprowadzimy go jako obraz JPEG 250 x 250px.
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; } });
Następny przykład zawiera kolejny zrzut ekranu „div” funkcji, ale tym razem wyświetla obraz JPEG o dokładnej wielkości div.
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; } });