Outils pour capturer et convertir le Web

Capturez des captures d'écran de sites Web ou convertissez du HTML en imagesAPI Node.js

Créez des captures d’images parfaites de sites Web en utilisant les fonctionnalités suivantes de API Node.js de GrabzIt. Cependant, avant de commencer, rappelez-vous qu'après avoir appelé le url_to_image, html_to_image or file_to_image méthodes le save or save_to méthode doit être appelée pour prendre la capture d'écran.

Options de base

Un seul paramètre est nécessaire pour prendre une capture d'écran d'une page Web ou convertir HTML into une image comme indiqué dans l'exemple suivant.

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

Formats de capture d'image

L'API Node.js de GrabzIt peut prendre des captures d'écran dans plusieurs formats, y compris JPG, PNG, WEBP, BMP (bits 8, bits 16, bits 24 ou bits 32) et TIFF. Le format par défaut pour les captures d’images est JPG. Cependant, la qualité d'une image JPG peut ne pas être suffisante pour certaines applications. Dans ces circonstances, le format PNG est recommandé pour les captures d'écran, car il offre un bon équilibre entre qualité et taille du fichier. L'exemple ci-dessous montre une capture d'écran d'image prise au format 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;
    }
});

Taille du navigateur

La taille du navigateur fait référence à la taille de la fenêtre du navigateur qui sera utilisée lors de la capture de la capture d'écran. Dans la plupart des cas, il n'est pas nécessaire de la définir car la taille du navigateur par défaut sera suffisante pour la plupart des tâches. Toutefois, si vous souhaitez définir la largeur et la hauteur du navigateur, un exemple est présenté ci-dessous.

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;
    }
});

Changer la taille de l'image

Changer la taille d'une image est facile, le faire sans la déformer est un peu plus difficile. Pour simplifier l’ensemble du processus, nous vous recommandons de l’utiliser. calculateur simple de dimension d'image.

Si vous souhaitez augmenter la largeur et la hauteur de l'image à une taille supérieure à celle du navigateur, qui correspond par défaut à 1024 de 728 pixels, vous devez également augmenter la largeur et la hauteur du navigateur.

Identifiant personnalisé

Vous pouvez transmettre un identifiant personnalisé au image Comme indiqué ci-dessous, cette valeur est ensuite renvoyée à votre gestionnaire GrabzIt Node.js. Par exemple, cet identifiant personnalisé pourrait être un identifiant de base de données, permettant d'associer une capture d'écran à un enregistrement de base de données particulier.

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;
    }
});

Capture d'écran complète

GrabzIt vous permet de prendre une capture d'écran complète d'une page Web entière. Pour ce faire, vous devez passer un -1 au browserHeight propriété. Pour que l’image corresponde à la taille du navigateur, transmettez un -1 au height et width propriétés.

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;
    }
});

Vous pouvez également renvoyer des vignettes qui ne sont pas recadrées, mais attention, cela peut créer de grandes images. Pour ce faire, passez un -1 au height et / ou width Propriétés. La dimension qui reçoit un -1 ne sera pas recadrée.

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;
    }
});
Notez qu'il n'y a pas de largeur totale du navigateur!

L'utilisation de ces valeurs spéciales signifie que vous pouvez créer une capture d'écran qui est une version complète de la page Web entière si vous le souhaitez!

Prendre une capture d'écran d'un élément de page

GrabzIt vous permet de prendre une capture d'écran d'un élément HTML, tel qu'un div or span tag, et capturer tout son contenu. Pour cela, l’identifiant ou la classe de l’élément HTML que vous voulez capturer doit être spécifié en tant que Sélecteur CSS.

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

Pour l'exemple ci-dessous, nous allons sélectionner la div avec l'id "features" et la sortir sous forme d'image 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;
    }
});

L'exemple suivant prend une autre capture d'écran de la fonction "features" mais cette fois-ci génère une image JPEG de la taille exacte de la 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;
    }
});