How to add Watermark Text to Image Exports in Bold BI Dashboard

This article provides a step-by-step guide on how to add watermark text to image exports in the Bold BI dashboard.

Prerequisites

1. Ensure you have access to the Bold BI application installed on your system.
2. Familiarity with C# and .NET development.

Steps to Adding Watermark Text to Image Exports

1. Download the Sample

Download the sample code provided for watermark customization.

2. Locate the Required DLL

Navigate to the installation directory of your Bold BI application:

Go to the bi\dataservice folder and get the BoldBI.Dashboard.Service.Extensions.dll.

3. Add the DLL to Your Project

1. In your class library project, right-click on the Dependencies node.
   
2. Add the BoldBI.Dashboard.Service.Extensions.dll to your project.
   

4. Implement the Watermark Customization

Add the following code in ExportCustomization.cs file to customize the image export with a watermark:

public async override Task<byte[]> CustomizeImageAsync(byte[] imageByte, Dictionary<string, object> exportDetails)
{
    string watermarkText = "BOLD BI"; // Add water mark text here
    return await AddWaterMarkTextToImage(imageByte, watermarkText, exportDetails["extension"]?.ToString());
}

private async Task<byte[]> AddWaterMarkTextToImage(byte[] imageByte, string watermarkText, string imageType)
{
    using (MemoryStream ms = new MemoryStream(imageByte))
    {
        using (var originalImage = System.Drawing.Image.FromStream(ms))
        {
            using (var graphics = Graphics.FromImage(originalImage))
            {
                Font font = new Font("Arial", 96);
                Brush brush = new SolidBrush(System.Drawing.Color.FromArgb(100, 255, 223, 142));

                SizeF textSize = graphics.MeasureString(watermarkText, font);
                float x = (originalImage.Width - textSize.Width) / 2;
                float y = (originalImage.Height - textSize.Height) / 2;

                graphics.TranslateTransform(x + textSize.Width / 2, y + textSize.Height / 2);
                graphics.RotateTransform(-45);
                graphics.DrawString(watermarkText, font, brush, -textSize.Width / 2, -textSize.Height / 2);
                graphics.RotateTransform(45);
                graphics.TranslateTransform(-(x + textSize.Width / 2), -(y + textSize.Height / 2));
            }

            using (MemoryStream outputMs = new MemoryStream())
            {
                originalImage.Save(outputMs, imageType == "png" ? ImageFormat.Png : ImageFormat.Jpeg);
                return outputMs.ToArray();
            }
        }
    }
}

5. Create the Handlers Folder

Create a handlers folder in the app_data/bi/dataservice directory.

6. Compile and Move the DLL

After customizing the export, compile the library and move the generated DLL to the handlers folder. Also, move any additional DLLs required by your class library, such as System.Common.Drawing.

7. Configure the Handler

Create a handler_config.json file in the handlers folder with the following content:

[{
    "feature": "export",
    "handler": "export_handler_name.dll",
    "tenants": []
}]

8. Restart IIS

After moving the DLL and adding the handler_config.json, restart IIS to apply the changes in Bold BI.

Additional References

• Export Dashboard Data to Excel with Images in BoldBI
• Customizing PDF Export Options in BoldBI Dashboards