Outils pour capturer et convertir le Web

Comment créer des captures d'image transparentes?

Il est possible de donner aux captures d'images HTML et aux captures d'écran d'URL un fond transparent. Cependant, cela ne fonctionnera que si l'arrière-plan du HTML capturé est transparent et que le format de l'image est PNG ou TIFF. Si vous utilisez un format d'image autre que PNG ou TIFF, vous obtiendrez un fond noir.

Pour qu'un document HTML ait un arrière-plan transparent, la propriété CSS background doit être définie sur transparent pour le html et de body balises comme indiqué dans les exemples ci-dessous.

GrabzItClient grabzIt = new GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret");
ImageOptions options = new ImageOptions();
options.Format = ImageFormat.png;
options.Transparent = true;
grabzIt.HTMLToImage("<html><head><style>html,body{background:transparent}</style></head><body><h1>Hello World!</h1></body></html>"
, options);
grabzIt.SaveTo("result.png");
GrabzItClient grabzIt = new GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret");
ImageOptions options = new ImageOptions();
options.setFormat(ImageFormat.PNG);
options.setTransparent(true);
grabzIt.HTMLToImage("<html><head><style>html,body{background:transparent}</style></head><body><h1>Hello World!</h1></body></html>"
, options);
grabzIt.SaveTo("result.png");
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.5.2/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML(
"<html><head><style>html,body{background:transparent}</style></head><body><h1>Hello World!</h1></body></html>",
{"format":"png","transparent":1}).Create();
</script>
var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");
client.html_to_image("<html><head><style>html,body{background:transparent}</style></head><body><h1>Hello World!</h1></body></html>",
{"format":"png","transparent":1});
client.save_to("result.png", function (error, id){
    if (error != null){
        throw error;
    }
});
$grabzIt = GrabzItClient->new("Sign in to view your Application Key", "Sign in to view your Application Secret");
$options = GrabzItImageOptions->new();
$options->format("png");
$options->transparent(1);
$grabzIt->HTMLToImage("<html><head><style>html,body{background:transparent}</style></head><body><h1>Hello World!</h1></body></html>", 
$options);
$grabzIt->SaveTo("result.png");
$grabzIt = new \GrabzIt\GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret");
$options = new \GrabzIt\GrabzItImageOptions();
$options->setFormat("png");
$options->setTransparent(true);
$grabzIt->HTMLToImage("<html><head><style>html,body{background:transparent}</style></head><body><h1>Hello World!</h1></body></html>",
$options);
$grabzIt->SaveTo("result.png");
grabzIt = GrabzItClient.GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret")
options = GrabzItImageOptions.GrabzItImageOptions()
options.format = "png"
options.transparent = True
grabzIt.HTMLToImage("<html><head><style>html,body{background:transparent}</style></head><body><h1>Hello World!</h1></body></html>",
options)
grabzIt.SaveTo("result.png")
    curl 
    -d key=Sign in to view your Application Key
    -d format=png
    -d transparent=1
    -d html=%3Chtml%3E%3Chead%3E%3Cstyle%3Ehtml%2Cbody%7Bbackground%3Atransparent%7D%3C%2Fstyle%3E%3C%2Fhead%3E%3Cbody%3E%3Ch1%3EHello%20World%21%3C%2Fh1%3E%3C%2Fbody%3E%3C%2Fhtml%3E
    https://api.grabz.it/services/convert
grabzIt = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")
options = GrabzIt::ImageOptions.new()
options.format = "png"
options.transparent = true
grabzIt.html_to_image("<html><head><style>html,body{background:transparent}</style></head><body><h1>Hello World!</h1></body></html>",
options)
grabzIt.save_to("result.png")