It is possible to give image captures of HTML and screenshots of URL's a transparent background. However this will only work if the background of the HTML being captured is transparent and the image format is either PNG or TIFF. If you use a image format other than PNG or TIFF you will get a black background.
In order for a HTML document to have a transparent background, the CSS background property must be set to transparent for both the html and body tags as shown in the below examples.
//The client should be stored somewhere and reused!
GrabzItClient grabzIt = new GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret", client);
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);
await grabzIt.SaveToAsync("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")