Adding Watermark to the Images in RadImageGallery

1 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 21 Jun 2016 Link to this post


    Telerik Product and Version

    Q1 2015

    Supported Browsers and Platforms


    Components/Widgets used (JS frameworks, etc.)



    This Code Library demonstrates how to add watermark to the images displayed in the RadImageGallery (also applicable with RadBinaryImage and RadImageEditor).

    Image with watermark


    Since the RadImageGallery is not designed to manipulate the original images bound to it, for adding a watermark to the displayed images in the control we will have to manipulate the originals before passing them to the RadImageGallery.

    As you will notice in the attached files, we are handling the OnNeedDataSource event of the control, where we are getting reference to the original images and we are merging them with the watermark:
    protected void RadImageGallery1_NeedDataSource(object sender, ImageGalleryNeedDataSourceEventArgs e)
        //Loading the watermark image
        System.Drawing.Bitmap imgWatermark = new System.Drawing.Bitmap(MapPath("Images/testWatermark.png"));
        //Creating a DataTable that will be filled with the binary image data, containing the images with the watermark
        DataTable table = new DataTable();
        table.Columns.Add("Title", typeof(string));
        table.Columns.Add("ImageData", typeof(byte[]));
        for (int i = 1; i < 10; i++)
            //Loading original image (in this example the images are named 1.jpg, 2.jpg, etc.)
            System.Drawing.Bitmap image1 = (System.Drawing.Bitmap)System.Drawing.Image.FromFile(Page.MapPath("Images/" + i + ".jpg"), true);
            //Combining the image with the watermakr
            System.Drawing.Bitmap newImage = CombineBitmaps(image1, imgWatermark);
            //Adding the new image as a byte array to the DataTable
            table.Rows.Add("Title" + i, ImageToByte(newImage));
        //Setting the DataSource of the RadImageGallery
        (sender as RadImageGallery).DataSource = table;

    As you could notice, we are passing the merged images as binary array to the RadImageGallery's DataSource.

    For the actual merging of the original images with the watermark we are using the ImageToByte and CombineBitmaps private methods.

    In the attached file you will find the markup and the code-behind of the sample page and a folder with test images.

Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.