add watermark in image

[nandhinijp]

i want to add watermark in image.i am using image handler. its not properly working. i want to add watermark at runtime only no need for original image.in my home page i have 25 thumbnail images. when i click any one of the image it goes next page and display large image at that time only i need watermark in image.please reply as early as possible.

[SheSaidImaPregy]

two effective ways to do this.. You can create a gif file that is transparent except for your watermark and create it the same size, or close to, of the default image. Then on your page, set the background of a div to the default image, and the size of the div to the size of the default image. Then inside the div, place the <img ...> of the watermark. This stops most people from copying and saving your pictures.

Anther way is to have it done dynamically at runtime. This creates a krap load of resources on your server and will always as long as any image is called. I would recommend staying away from it.

The way that I do it is that I upload the picture to my server through a website, save a temp of it, open the temp, resize and then add a watermark to it (just text at the moment).. then save it to the name and directory wanted. I do this both for thumbnails and main images. I'll give you a resize function and a watermark function that you might want to use.

You need these namespaces:

<%@ import Namespace="System.IO" %>
<%@ import Namespace="System.Drawing.Imaging" %>
<%@ import Namespace="System.Drawing" %>
<%@ import Namespace="System.Drawing.Drawing2D" %>

resize function:

Function generateThumbnail(ByVal newWidth As Integer, ByVal strFileName As String, ByVal newStrFileName As String)
  Dim bmp As Bitmap
  Dim newHeight As Integer
  Dim resized As Bitmap
  Dim FilePath As String = Server.MapPath("/images/")

  bmp = System.Drawing.Image.FromFile(FilePath & strFileName & ".jpg")
  newHeight = (newWidth/bmp.width)*bmp.Height
  resized = new Bitmap(newWidth,newHeight)
  newStrFileName = FilePath & newStrFileName & ".jpg"
  
  Dim g as Graphics = Graphics.FromImage(resized)
  g.SmoothingMode = SmoothingMode.HighQuality
  g.CompositingQuality = CompositingQuality.HighQuality
  g.InterpolationMode = InterpolationMode.High
  g.DrawImage(bmp, new Rectangle(0,0,resized.Width,resized.Height),0,0,bmp.Width,bmp.Height,GraphicsUnit.Pixel)
  g.Dispose()
  resized.Save(newStrFileName,ImageFormat.Jpeg)
  bmp.dispose()
End Function

watermark function:

Function watermark(ByVal strFileName As String, ByVal newStrFileName As String)
  Dim FilePath As String = Server.MapPath("/images/")
  Dim bmp As Bitmap = System.Drawing.Image.FromFile(FilePath & strFileName & ".jpg")
  Dim strWatermark As String = "WATERMARK TEXT"
  Dim canvas As Graphics = Graphics.FromImage(resized)
  Dim StringSizeF As SizeF, DesiredWidth As Single, wmFont As Font, RequiredFontSize As Single, Ratio As Single
  newStrFileName = FilePath & newStrFileName & ".jpg"
  wmFont = New Font("Verdana", 6, FontStyle.Bold)
  DesiredWidth = bmp.Width * .75
  StringSizeF = canvas.MeasureString(strWatermark, wmFont)
  Ratio = StringSizeF.Width / wmFont.SizeInPoints
  RequiredFontSize = DesiredWidth / Ratio
  wmFont = New Font("Verdana", RequiredFontSize, FontStyle.Bold)
  canvas.DrawString(strWatermark, wmFont, New SolidBrush(Color.Beige), 0, 0)
  canvas.DrawString(strWatermark, wmFont, New SolidBrush(Color.FromArgb(128, 0, 0, 0)), 2, 2)
  canvas.DrawString(strWatermark, wmFont, New SolidBrush(Color.FromArgb(128, 255, 255, 255)), 0, 0)
  canvas.DrawString(strWatermark, wmFont, New SolidBrush(Color.FromArgb(128, 0, 0, 0)), 2, 2)
  canvas.DrawString(strWatermark, wmFont, New SolidBrush(Color.FromArgb(128, 255, 255, 255)), 0, 0)
  bmp.SetResolution(96, 96)
  bmp.Save(newStrFileName,ImageFormat.Jpeg)
  canvas.dispose()
  bmp.dispose()
End Function

Now these functions I have edited before I put on here, so if there's a flaw let me know as I haven't had time to test them. Anyway, you need to save your uploaded image first, or at least know the location of the ones you want to watermark or resize. An example on how to use these are:

''resize
''if you wish to have the ".jpg" within the function command, remove it from
''within the function and you can have "resizeme.jpg" and "resized.jpg"
generateThumbnail(100,"resizeme","resized")

''watermark
''if you wish to have the ".jpg" within the function command, remove it from
''within the function and you can have "watermarkme.jpg" and "watermarked.jpg"
watermark("watermarkme","watermarked")

These functions only do JPEGS, so if you try another file format, it will fail on you.

[nandhinijp]

thanks.
i want watermark only at runtime.no need to save with watermark and also i am using .jpg,.gif,.tif,.png image formats.During image upload,resize functions are over.when clicking thumb image in first page it displays big image in second page. these are done. i need only one thing add watermark when display image thats the problem

[SheSaidImaPregy]

for images at runtime, follow this article. it works and is a good way to do things, however I do not believe in putting so much process on the server everytime an image is requested. But that's my take on it :)

http://www.codeproject.com/KB/aspnet/httpImageHandler.aspx

[nandhinijp]

hi,
I enclosed one word doc.there are one class file and webconfig details.In that class file image path spcified like
Image image = Image.FromFile(context.Request.PhysicalPath);.
that means watermark image applied for all displayed images. its working very good.but i dont want to show watermark for all images. if i integrate that class file with my project its totally struck.. because my site like photo upload.please verify that class file and give solution.

[SheSaidImaPregy]

So put all the coding within a function. Then you can call that function on the certain photos you want watermarked.

[nandhinijp]

i couldnt get result please explain

[SheSaidImaPregy]

explain which one, the one I gave you or the one on the tutorial?

[nandhinijp]

U told to put all the coding within a function. that class contains 3 fun and implements IHttpHandler.how to use these in .aspx page include IHttpHandler.i want one and only thing thats at runtime just i click the thumb and corresponding large image will load with watermark.if any other methods to put just watermark in <img> tag.

[SheSaidImaPregy]

well your web.config file is being called everytime your page is. Within your web.config file, you have the ImageHandler class being called for every .jpg, etc. If you want only the large image to watermark, then I would suggest creating a unique string within the images' name so when it is called, ONLY that image will be watermarked. An example of this:

Large Image Names:
terry-123WM123.jpg
beachparty-123WM123.jpg
howdy-123WM123.jpg

or

picture123WM123.jpg
terry123WM123.jpg

etc.

Now in your web.config file, change your HTTP Handler that you put in there
[
<httpHandlers> 
<add verb="*" path="*.jpg,*.gif" type="ImageHandler,Home" validate="false"/>
</httpHandlers>
]
to
[
<httpHandlers> 
<add verb="*" path="*123WM123.jpg,*123WM123.gif" type="ImageHandler,Home" validate="false"/>
</httpHandlers>
]

The star (*) symbolizes that anything with a jpg or gif end tag will be run with the watermark code. Therefore, if you only want specific images to contain the watermark, add a special unique string within the files being called, much like "123WM123". This will call anything that ends with "123WM123.jpg" and "123WM123.gif". Now I suggest doing something more practical like:
*WML.jpg and *WML.gif. WML meaning watermarklarge (for me)

Do you understand?

[nandhinijp]

Its fine working.Thanks.I have one more doubt regarding watermark text size.I have same size images.In one image,watermark text is large font.In another one image small font size.I want watermark text as standard format,size and also according to image size.
below code for text size.
SizeF textSize = graphic.MeasureString(watermark, myFont);

int x =100;
int y= 100;
PointF pointF = new PointF(x, y);
graphic.DrawString(watermark, myFont, brush, pointF);
x += Convert.ToInt32(textSize.Width);
y += Convert.ToInt32(textSize.Height);

If u want please verify my earlier attachment.

[SheSaidImaPregy]

You need to set the font size depending on the size of the image. Now how long is your watermark, and how far across the image do you want it to be? In my example, it is set at 70% of the image's size. So if this was my images' size:

---------------------------
|                         |
|                         |
|WaterMarkText 70%        |
|                         |
|Water Mark 50%           |
---------------------------

Therefore, if you wish your watermark to be 70% of the picture width, you need to divide your pictures width by the ratio.

Look at my earlier example. It is always set to 75% of the picture. So if the picture is 6000 pixels in width, my text will always take up 4500 pixels. If it is only 100 pixels in width, it will take up 75 pixels.

[nandhinijp]

gdfgdsfgdfgdf[TEX][/TEX]

[nandhinijp]

Watermark text size related to image resolution.If image resolution is 100 means text size is small if it is >300 text size too large.can we change the image resolution at the upload time. or can we set text doesnt relate with resolution.

[SheSaidImaPregy]

It should relate to the resolution, it should relate to the width of the image.

[SheSaidImaPregy]

Oh I see what you're saying. Yes you can set it to a certain size period. Keep this in mind though that if the picture is small, your watermark may "run off" the picture. Instead of setting the watermark text to a resized font size, just set the font size!

[nandhinijp]

Without text size problem Its working good in local.If i upload files it doesnt work in site.I think problem in specifying the image path that is

Image image = Image.FromFile(context.Request.PhysicalPath);

what is the exact path specification instead of this.

[nandhinijp]

I didnt set watermark text to a resized font size,I just set the font size!

Font myFont = new Font("Arial", 18);
SolidBrush brush = new SolidBrush(Color.FromArgb(80, Color.White));
At run time it takes like that.

[SheSaidImaPregy]

can I see the graphics? Take a screen shot of a smaller one and a larger one so I see the scope of your problem. Thanks.

[nandhinijp]

The first image(bird) has a resolution 300.second one 100.I think In that class there is no relation between text size and resolution.

[nandhinijp]

please reply for my path problem
Image image = Image.FromFile(context.Request.PhysicalPath);
instead of this i give full path in local.but image also not diplay..
what can i give instead of context.Request.PhysicalPath in site upload.please tell me.

[SheSaidImaPregy]

I'm sorry, this is for uploading or watermarking/displaying images at runtime?

[nandhinijp]

Hi. Still i have path problem in watermark.So
I want to use session in class.
i want to get image name and append to folder
In that Session["showimage"] contains image name

String iname =(string)HttpContext.Current.Session["showimage"];

I got the error

Object reference not set to an instance of an object.
How to modify this statement?

[nandhinijp]

How to delete unnecessary posts in this forum

[nandhinijp]

watermark is working in my system.when i upload files in site.it didnt display watermark in images.usually display images only.Please help me.whats is the problem in upload?

[SheSaidImaPregy]

You upload the files, including web.config? Make sure you uploaded that one as well.

[nandhinijp]

Totally i upload all the files once again.but i have the same problem.really i dont know what is the problem? is there any path problem? or any other?
there is no problem in local.

[SheSaidImaPregy]

Chances are yes, there is a path problem or your versions are wrong and not compatible. Check to see that your paths are right. If it works local and not on the server, it can be three things:

incompatibility, path problems, or I forgot this one.

[nandhinijp]

Is there any method to add watermark in image at runtime.

[SheSaidImaPregy]

Just follow the same tutorial as was listed in the beginning of this thread. What is basically done is that when in the output stream, if the server comes across the image with the end handle of what you specify in web.config, it will run it through a function, or class, then that class will throw it back into the output stream. This is all done at runtime.