Add a watermark to an image uploaded in CKEditor

Adding watermarks to uploaded images is a much sought after feature in many media and news agency websites. There is an easy way to add a watermark to an image uploaded in any website using CKEditor.

Here is the method to add a watermark to an image uploaded via CKFinder. There is a plugin in CKFinder called watermark which needs to be configured before we can use it. Follow the steps below to configure it.

In the SetupCKEditor Method:

public override void SetConfig()
{
…….
Plugins = new string[] {
“CKFinder.Plugins.Watermark, CKFinder_Watermark”
};
// Settings for extra plugins.
PluginSettings = new Hashtable();
PluginSettings.Add(“ImageResize_smallThumb”, “90×90” );
PluginSettings.Add(“ImageResize_mediumThumb”, “120×120” );
PluginSettings.Add(“ImageResize_largeThumb”, “180×180” );

// Name of the watermark image in plugins/watermark folder
PluginSettings.Add(“Watermark_source”, “logo.gif”);
//if the watermark alignment is to the right:
PluginSettings.Add(“Watermark_marginRight”, “10”);
//if the watermark alignment is to the left:
PluginSettings.Add(“Watermark_marginLeft”, “5”);
PluginSettings.Add(“Watermark_marginBottom”, “5” );
PluginSettings.Add(“Watermark_quality”, “90” );
PluginSettings.Add(“Watermark_transparency”, “80” );

…..
}

Now after you enabled the watermark feature inside the CKEditor: you can add the “CKFinder_Watermark.dll” to your application to start using this feature. I adjusted the dll to allow the user to choose the position of the watermark: (right, left, top, bottom, transparency…)

using System;
using System.Text;
using System.IO;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Web;
using System.Web.UI;
using System.Collections;

namespace CKFinder.Plugins
{
public class Watermark : CKFinder.CKFinderPlugin
{
public string JavascriptPlugins
{
get { return “”; }
}

public void Init(CKFinder.Connector.CKFinderEvent CKFinderEvent)
{
CKFinderEvent.AfterFileUpload += new CKFinder.Connector.CKFinderEvent.Hook(CKFinderEvent_AfterFileUpload);

if (!CKFinder.Connector.Config.Current.PluginSettings.ContainsKey(“Watermark_source”))
CKFinder.Connector.Config.Current.PluginSettings[“Watermark_source”] = “logo.gif”;
if (!CKFinder.Connector.Config.Current.PluginSettings.ContainsKey(“Watermark_marginRight”))
CKFinder.Connector.Config.Current.PluginSettings[“Watermark_marginRight”] = “0”;
if (!CKFinder.Connector.Config.Current.PluginSettings.ContainsKey(“Watermark_marginLeft”))
CKFinder.Connector.Config.Current.PluginSettings[“Watermark_marginLeft”] = “0”;
if (!CKFinder.Connector.Config.Current.PluginSettings.ContainsKey(“Watermark_marginBottom”))
CKFinder.Connector.Config.Current.PluginSettings[“Watermark_marginBottom”] = “5”;
if (!CKFinder.Connector.Config.Current.PluginSettings.ContainsKey(“Watermark_quality”))
CKFinder.Connector.Config.Current.PluginSettings[“Watermark_quality”] = “90”;
if (!CKFinder.Connector.Config.Current.PluginSettings.ContainsKey(“Watermark_transparency”))
CKFinder.Connector.Config.Current.PluginSettings[“Watermark_transparency”] = “80”;
}

private void CKFinderEvent_AfterFileUpload(object sender, CKFinder.Connector.CKFinderEventArgs e)
{
if (!File.Exists((string)e.data[1]))
return;
try
{
CreateWatermark((string)e.data[1]);
}
catch { }
}

private void CreateWatermark(string sourceFile)
{
string logoImageName = (string)CKFinder.Connector.Config.Current.PluginSettings[“Watermark_source”];
string logoImageFile = logoImageName;

//search watermark image
if (!File.Exists(logoImageFile))
{
if (File.Exists(HttpContext.Current.Server.MapPath(logoImageFile)))
logoImageFile = HttpContext.Current.Server.MapPath(logoImageFile);
else
{
logoImageFile = HttpContext.Current.Server.MapPath(((Page)HttpContext.Current.Handler).ResolveUrl(“~/ckfinder/plugins/watermark/” + logoImageName));
if (!File.Exists(logoImageFile))
{
logoImageFile = HttpContext.Current.Server.MapPath(((Page)HttpContext.Current.Handler).ResolveUrl(“ckfinder/plugins/waterrmark/” + logoImageName));
if (!File.Exists(logoImageFile))
return;
}
}
}

//load configuration
int marginBottom = 0, marginRight = 0, marginLeft = 0, transparency = 0;
int.TryParse((string)CKFinder.Connector.Config.Current.PluginSettings[“Watermark_marginBottom”], out marginBottom);
int.TryParse((string)CKFinder.Connector.Config.Current.PluginSettings[“Watermark_marginRight”], out marginRight);
int.TryParse((string)CKFinder.Connector.Config.Current.PluginSettings[“Watermark_marginLeft”], out marginLeft);
if (int.TryParse((string)CKFinder.Connector.Config.Current.PluginSettings[“Watermark_transparency”], out transparency))
{
if (transparency > 100) transparency = 100;
if (transparency < 0) transparency = 0;
transparency = transparency * 255 / 100;
}
else transparency = 255;

//load bitmaps
Image sourceImage = new Bitmap(sourceFile);
Bitmap destinationBmp = new Bitmap(sourceImage.Width, sourceImage.Height);
Bitmap logoImage = new Bitmap(logoImageFile);
Graphics graphics = Graphics.FromImage(destinationBmp);

//convert to indexes image
Bitmap bitmapImage = CreateNonIndexedImage(logoImage);

//set transparency
for (int i = 0; i < logoImage.Width; i++)
for (int j = 0; j < logoImage.Height; j++)
{
Color logoImagePixel = logoImage.GetPixel(i, j);
if (logoImagePixel.A != 0)
bitmapImage.SetPixel(i, j, Color.FromArgb(transparency, logoImagePixel));
}

//resize watermark – if is necessary
if (logoImage.Width > sourceImage.Width || logoImage.Height > sourceImage.Height)
bitmapImage = resizeImage(logoImage,
new Size(logoImage.Width > sourceImage.Width ? sourceImage.Width : logoImage.Width,
logoImage.Height > sourceImage.Height ? sourceImage.Height : logoImage.Height));
graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
System.Drawing.Imaging.ImageFormat sourceImageFormat = sourceImage.RawFormat;
graphics.DrawImage(sourceImage, new PointF(0, 0));

if (marginLeft > 0)
graphics.DrawImage(bitmapImage, marginLeft, sourceImage.Height – bitmapImage.Height – marginBottom);
else
graphics.DrawImage(bitmapImage, sourceImage.Width – bitmapImage.Width – marginRight, sourceImage.Height – bitmapImage.Height – marginBottom);

//Dispose objects
sourceImage.Dispose();
logoImage.Dispose();
bitmapImage.Dispose();
graphics.Dispose();
destinationBmp.Save(sourceFile, sourceImageFormat);
sourceImage.Dispose();
}

private Bitmap resizeImage(Image imgToResize, Size size)
{
int sourceWidth = imgToResize.Width;
int sourceHeight = imgToResize.Height;
float nPercent = 0;
float nPercentW = nPercentW = ((float)size.Width / (float)sourceWidth);
float nPercentH = nPercentH = ((float)size.Height / (float)sourceHeight);
nPercent = nPercentH < nPercentW ? nPercentH : nPercentW;

int destWidth = (int)(sourceWidth * nPercent);
int destHeight = (int)(sourceHeight * nPercent);

Bitmap bitmap = new Bitmap(destWidth, destHeight);
Graphics graphics = Graphics.FromImage((Image)bitmap);
graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
graphics.DrawImage(imgToResize, 0, 0, destWidth, destHeight);
graphics.Dispose();
return bitmap;
}

private Bitmap CreateNonIndexedImage(Bitmap src)
{
Bitmap newBmp = new Bitmap(src.Width, src.Height, System.Drawing.Imaging.PixelFormat.Format32bppArgb);
using (Graphics gfx = Graphics.FromImage(newBmp))
gfx.DrawImage(src, 0, 0);
return newBmp;
}
}
}

Now after applying all these options, whenever the user upload any image into the CKEditor, the selected watermark will be displayed in the position he specified.

To download the original file for the CKFinder_Watermark.dll you can use the link below:

http://www.bvbcode.com/code/jplkmu8g-1826642-down

Or more details on the CKEditor plugins:

http://docs.cksource.com/CKFinder_2.x/Developers_Guide/ASP.NET/Plugins/Writing_ASP.NET

Advertisements

2 thoughts on “Add a watermark to an image uploaded in CKEditor

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s