Cree capturas de pantalla de imágenes perfectas de sitios web utilizando las siguientes funciones de GrabzIt's Node.js API. Sin embargo, antes de comenzar, recuerde que después de llamar al url_to_image, html_to_image or file_to_image métodos de save or save_to Se debe llamar al método para tomar la captura de pantalla.
Solo se requiere un parámetro para tomar una captura de pantalla de una página web o convertir HTML intuna imagen como se muestra en el siguiente ejemplo.
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
GrabzIt's Node.js API puede tomar capturas de pantalla de imágenes en varios formatos, incluidos JPG, PNG, WEBP, BMP (bit 8, bit 16, bit 24 o bit 32) y TIFF. El formato predeterminado para las capturas de pantalla de imágenes es JPG. Sin embargo, la calidad de una imagen JPG puede no ser lo suficientemente buena para algunas aplicaciones. En estas circunstancias, se recomienda el formato PNG para capturas de pantalla de imágenes, ya que proporciona un buen equilibrio entre la calidad y el tamaño del archivo. El siguiente ejemplo muestra una captura de pantalla de imagen tomada con el 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; } });
El tamaño del navegador se refiere al tamaño de la ventana del navegador que se utilizará al capturar la captura de pantalla; en la mayoría de los casos, no es necesario establecerlo, ya que el tamaño predeterminado del navegador será suficiente para la mayoría de las tareas. Sin embargo, si desea establecer el ancho y la altura del navegador, a continuación se muestra un ejemplo.
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; } });
Cambiar el tamaño de una imagen es fácil, hacerlo sin distorsionar la imagen es un poco más difícil. Para simplificar todo el proceso, le recomendamos que utilice este calculadora de dimensión de imagen simple.
Si desea aumentar el ancho y alto de la imagen a un tamaño mayor que el ancho y alto del navegador, que por defecto es 1366 por 728 píxeles, el ancho y la altura del navegador también deben aumentarse para que coincidan.
Puede pasar un identificador personalizado a imagen métodos como se muestra a continuación, este valor se devuelve a su controlador GrabzIt Node.js. Por ejemplo, este identificador personalizado podría ser un identificador de base de datos, lo que permite asociar una captura de pantalla con un registro de base de datos particular.
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 le permite tomar una captura de pantalla completa de una página web completa para hacer esto, necesita pasar un -1 al browserHeight
propiedad. Para garantizar que la imagen coincida con el tamaño del navegador, pase un -1 al height
y width
propiedades.
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; } });
También puede devolver miniaturas que no estén recortadas, pero tenga en cuenta que esto puede crear imágenes grandes. Para hacer esto, pase un -1 al height
y/o width
propiedades. La dimensión que se pasa a -1 no se recortará.
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; } });
¡Usar estos valores especiales significa que puede crear una captura de pantalla que sea una versión a escala completa de toda la página web si lo desea!
GrabzIt le permite tomar una captura de pantalla de un elemento HTML, como un div
or span
etiquetar y capturar todo su contenido. Para hacer esto, el elemento HTML que desea capturar debe especificarse como un Selector de CSS.
... <div id="features"> <img src="http://www.example.com/boat.jpg"/><h3>New Boat Launched</h3> </div> ...
Para el ejemplo a continuación, seleccionaremos el div con la identificación "características" y lo enviaremos como una imagen 250 x 250px JPEG.
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; } });
El siguiente ejemplo toma otra captura de pantalla del div "características" pero esta vez genera una imagen JPEG que tiene el tamaño exacto del 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; } });