Crie capturas de tela perfeitas de sites usando os seguintes recursos de API Node.js do GrabzIt. No entanto, antes de começar, lembre-se de que depois de ligar para o url_to_image, html_to_image or file_to_image métodos os save or save_to O método deve ser chamado para fazer a captura de tela.
Apenas um parâmetro é necessário para fazer uma captura de tela de uma página da Web ou converter HTML intoa imagem como mostrado no exemplo a seguir.
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
A API Node.js do GrabzIt pode capturar capturas de tela de imagem em vários formatos, incluindo JPG, PNG, WEBP, BMP (bits 8, bits 16, bits 24 ou bits 32) e TIFF. O formato padrão para capturas de tela de imagens é JPG. No entanto, a qualidade de uma imagem JPG pode não ser boa o suficiente para alguns aplicativos. Nessas circunstâncias, o formato PNG é recomendado para capturas de tela de imagem, pois oferece um bom equilíbrio entre qualidade e tamanho do arquivo. O exemplo abaixo mostra uma captura de tela da imagem sendo usada no formato 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; } });
O tamanho do navegador se refere ao tamanho da janela do navegador que será usada ao capturar a captura de tela na maioria dos casos, isso não precisa ser definido, pois o tamanho padrão do navegador será suficiente para quase todas as tarefas. No entanto, se você deseja definir a largura e a altura do navegador, um exemplo é mostrado abaixo.
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; } });
É fácil alterar o tamanho de uma imagem, sem distorcer a imagem, é um pouco mais difícil. Para simplificar todo o processo, recomendamos que você use este calculadora de dimensão de imagem simples.
Se você deseja aumentar a largura e a altura da imagem para um tamanho maior que a largura e a altura do navegador, que por padrão é 1366 por pixels 728, a largura e a altura do navegador também devem ser aumentadas para corresponder.
Você pode passar um identificador personalizado para o imagem Como mostrado abaixo, esse valor é retornado ao seu manipulador GrabzIt Node.js. Por exemplo, esse identificador personalizado pode ser um identificador de banco de dados, permitindo que uma captura de tela seja associada a um registro específico do banco de dados.
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; } });
O GrabzIt permite que você tire uma captura de tela completa de uma página da web inteira para fazer isso. Você precisa passar um -1 para o browserHeight
propriedade. Para garantir que a imagem corresponda ao tamanho do navegador, passe -1 para o height
e width
propriedades.
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; } });
Você também pode retornar miniaturas que não são cortadas, mas cuidado, isso pode criar imagens grandes. Para fazer isso, passe um -1 para o height
e / ou width
propriedades. A dimensão que é passada por um -1 não será cortada.
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; } });
O uso desses valores especiais significa que você pode criar uma captura de tela que seja uma versão em escala completa de toda a página da web, se desejar!
O GrabzIt permite tirar uma captura de tela de um elemento HTML, como um div
or span
tag e capture todo o seu conteúdo. Para fazer isso, o elemento HTML que você deseja capturar a tela deve ser especificado como um Seletor CSS.
... <div id="features"> <img src="http://www.example.com/boat.jpg"/><h3>New Boat Launched</h3> </div> ...
Para o exemplo abaixo, selecionaremos a div com o ID "features" e a produziremos como uma imagem 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; } });
O próximo exemplo tira outra captura de tela da div "features", mas desta vez gera uma imagem JPEG com o tamanho exato da 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; } });