?
Solved

How to superimpose text on an image (ASP.NET C#)

Posted on 2010-01-04
11
Medium Priority
?
768 Views
Last Modified: 2012-08-14
Hi,

I have a background image on which I want to superimpose some text...how do I do it?

I know one way of doing it is writing the text in some image editor and save the image.

BUT, I dont want to do it that way. I want to show text programatically on the image.

See the attached image, the fonts are getting distorted when we write text in image editor and save. That's the reason I want to put text using code.
Thanks!
BlueBG.jpg
0
Comment
Question by:meetpd
  • 5
  • 2
  • 2
  • +2
11 Comments
 
LVL 42

Expert Comment

by:Meir Rivkin
ID: 26170404
taken from http://www.switchonthecode.com/tutorials/csharp-snippet-tutorial-how-to-draw-text-on-an-image

here's a code snippet:
Bitmap myBitmap = new Bitmap("C:\\myImage.jpg");
Graphics g = Graphics.FromImage(myBitmap);
g.DrawString("My\nText", new Font("Tahoma", 40), Brushes.White, new PointF(0, 0));

Open in new window

output-1.jpg
0
 
LVL 42

Expert Comment

by:Meir Rivkin
ID: 26170411
u can play around with DrawString, changing fonts, colors, draw vertical text etc.
0
 

Author Comment

by:meetpd
ID: 26170521
Thanks for the quick reply.

I did it on the load event of the image but somehow it did not work.

What am I doing wrong?
protected void EmpBG(object sender, EventArgs e)
        {
            Bitmap myBitmap = new Bitmap("E:\\Images\\BlueBG.jpg");
            Graphics g = Graphics.FromImage(myBitmap);
            g.DrawString("My Text", new Font("Tahoma",20), Brushes.White, new PointF(5,5));

        }

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 42

Expert Comment

by:Meir Rivkin
ID: 26170557
ru using image as part of asp.net resource?
0
 
LVL 14

Expert Comment

by:amar31282
ID: 26170962
would u like to do it using CSS
0
 

Expert Comment

by:aholl
ID: 26171646
1st, Remember that code portion is run on the server side not the client side, 2nd, you have now burn text on to your image but you dint saved it localy and send it to the client...

If you want to make this work, you will have to write text to your original image and then save it to the new modified image in the page_load of your .cs (code page) file. remember to reference the same image path into your asp document.

0
 

Author Comment

by:meetpd
ID: 26172079
How can we do it using CSS?
0
 
LVL 42

Accepted Solution

by:
Meir Rivkin earned 2000 total points
ID: 26172269
check the code snippet:
Image1 is the id of my Image Control which i set to an image file in the project (dt.jpg).
then in the code behind, upon user click button, i initialize the Image object, and using the Graphics i draw text on the image and saves the image back again.

the aspx source page looks like this:
  <form id="form1" runat="server">
   <table width="100%" border="0">
                        <tr>
                              <td width="100%">
                                    <BR>
                                     <asp:Image ID="Image1" runat="server" Height="558px" ImageUrl="~/dt.jpg"
        Width="662px" />
                                    </td>
                        </tr>
                        <tr>
                              <td width="100%">
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
    </td>
    </tr>  
    </form>

System.Web.UI.WebControls.Image img = (System.Web.UI.WebControls.Image)Page.FindControl("Image1");
            string url = Server.MapPath(img.ImageUrl);
            System.Drawing.Image theImg = System.Drawing.Image.FromFile(url);
            Graphics g = Graphics.FromImage(theImg);
            g.SmoothingMode = SmoothingMode.AntiAlias;
            g.DrawString("My Text", new Font("Tahoma", 20), Brushes.White, new PointF(5, 5));
            Response.ContentType = "image/jpeg";
            theImg.Save(Response.OutputStream, theImg.RawFormat);
            theImg.Dispose();
            g.Dispose();

Open in new window

0
 
LVL 42

Expert Comment

by:Meir Rivkin
ID: 26172288
and here's the before and after screenshots.
output-1.jpg
output-2.jpg
0
 

Expert Comment

by:aholl
ID: 26172696
ok so, everything is ok now??
0
 

Expert Comment

by:dhiraj79
ID: 34032915
Hi The above posts are quite good.
But if you want to show different Text on on an Image on ASP.NET depending upon a drop down selection then see the below post.

http://www.freejobsreference.com/dotnetforums/47-How-to-superImpose-or-Overlay-Different-Text-on-Images-in-ASP-NET.aspx
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
this video summaries big data hadoop online training demo (http://onlineitguru.com/big-data-hadoop-online-training-placement.html) , and covers basics in big data hadoop .
As many of you are aware about Scanpst.exe utility which is owned by Microsoft itself to repair inaccessible or damaged PST files, but the question is do you really think Scanpst.exe is capable to repair all sorts of PST related corruption issues?
Suggested Courses
Course of the Month17 days, 3 hours left to enroll

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question