Adding Watermark to the Images in RadImageGallery

Thread is closed for posting
1 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 21 Jun 2016 Link to this post

    Requirements

    Telerik Product and Version

    Q1 2015

    Supported Browsers and Platforms

    -

    Components/Widgets used (JS frameworks, etc.)

    -

    PROJECT DESCRIPTION

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

    Image with watermark


    INSTRUCTIONS

    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 WatermarkOnImages.zip 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.