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")