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