Outils pour capturer et convertir le Web

Capturez des captures d'écran de sites Web ou convertissez du HTML en images

API Ruby

Produisez de meilleures captures d’images de pages Web ou convertissez du HTML directement en images en utilisant les fonctionnalités suivantes de API Ruby 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 La méthode doit être appelée pour créer l'image.

Options de base

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

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

Formats d'image

L'API Ruby de GrabzIt peut prendre des captures d'écran dans plusieurs formats, notamment JPG, PNG, WEBP, BMP (bits 8, bits 16, bits 24 ou 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.

grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.format = "png"

grabzItClient.url_to_image("https://www.tesla.com", options)
# Then call the save or save_to method
grabzItClient.save_to("result.png")
grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.format = "png"

grabzItClient.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options)
# Then call the save or save_to method
grabzItClient.save_to("result.png")
grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.format = "png"

grabzItClient.file_to_image("example.html", options)
# Then call the save or save_to method
grabzItClient.save_to("result.png")

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. Pour définir la taille du navigateur, il suffit de passer une valeur à la browserWidth et browserHeight méthodes de la ImageOptions classe.

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 à 1366 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 Ruby. 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.

grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.customId = "123456"

grabzItClient.url_to_image("https://www.tesla.com", options)
# Then call the save method
grabzItClient.save("http://www.example.com/handler/index")
grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.customId = "123456"

grabzItClient.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options)
# Then call the save method
grabzItClient.save("http://www.example.com/handler/index")
grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.customId = "123456"

grabzItClient.file_to_image("example.html", options)
# Then call the save method
grabzItClient.save("http://www.example.com/handler/index")

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 méthode. Pour que l’image corresponde à la taille du navigateur, transmettez un -1 au height et width attributs.

grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.browserHeight = -1
options.width = -1
options.height = -1

grabzItClient.url_to_image("https://www.tesla.com", options)
# Then call the save or save_to method
grabzItClient.save_to("result.jpg")
grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.browserHeight = -1
options.width = -1
options.height = -1

grabzItClient.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options)
# Then call the save or save_to method
grabzItClient.save_to("result.jpg")
grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.browserHeight = -1
options.width = -1
options.height = -1

grabzItClient.file_to_image("example.html", options)
# Then call the save or save_to method
grabzItClient.save_to("result.jpg")

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 (facultatif) width méthodes. La dimension qui reçoit un -1 ne sera pas recadrée.

grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.width = -1
options.height = -1

grabzItClient.url_to_image("https://www.tesla.com", options)
# Then call the save or save_to method
grabzItClient.save_to("result.jpg")
grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.width = -1
options.height = -1

grabzItClient.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options)
# Then call the save or save_to method
grabzItClient.save_to("result.jpg")
grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.width = -1
options.height = -1

grabzItClient.file_to_image("example.html", options)
# Then call the save or save_to method
grabzItClient.save_to("result.jpg")
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 ce faire, l'élément HTML que vous souhaitez capturer doit être spécifié comme Sélecteur CSS.

...
<div id="features">
	<img src="http://www.example.com/rocket.jpg"/><h3>Rocket Launch Next Week</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.

grabzItClient = GrabzIt::Client.new("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
options = GrabzIt::ImageOptions.new()
options.width = 250
options.height = 250
options.format = "jpg"
options.targetElement = "#features"

grabzItClient.url_to_image("http://www.bbc.co.uk/news", options)
# Then call the save or save_to method
grabzItClient.save_to("result.jpg")

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.

grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

# The -1 indicates that image should not be cropped
options = GrabzIt::ImageOptions.new()
options.width = 250
options.height = 250
options.format = "jpg"
options.targetElement = "#features"
options.browserHeight = -1

grabzItClient.url_to_image("http://www.bbc.co.uk/news", options)
# Then call the save or save_to method
grabzItClient.save_to("result.jpg")