Asp.net: change the text color in Image dynamically

In this article today I am going to explain how to change the text color in Image in Asp.net.

Description:

In the previous article I have explained Different ways to disable auto-fill inbrowser for a textbox and Insert multiple records (rows) into sql serverdatabase.

To change the text color in image I have use the transparent image. In this example I have keep the transparent image in images folder. On button click to change color I have create a new image and save to image folder.

Implementation:

HTML Markup:

  <table>

    <tr>

   <td colspan="2">

        <asp:Image ID="Image1" runat="server" ImageUrl="images/n.png" /></td>

    </tr>

    <tr>

    <td><asp:Button ID="Button1" runat="server" Text="Green" /></td><td><asp:Button ID="btnred"

            runat="server" Text="Red" /></td>

    </tr>

    </table>

Add the Namespace

C#:

using System.IO;

using System.Drawing.Imaging;

using System.Drawing;

VB:

Imports System.IO

Imports System.Drawing.Imaging

Imports System.Drawing

Add the below given function code file 

C#:

private Bitmap ChangeImageColor(System.Drawing.Image source, Color nCol)

    {

        Bitmap bmp = new Bitmap(source);

        for (int y = 0; y < bmp.Height; y++)

        {

            for (int x = 0; x < bmp.Width; x++)

            {

                Color col = bmp.GetPixel(x, y);

                if (col.A != 0)                {

                    int r = (int)(nCol.R);

                    int g = (int)(nCol.G);

                    int bmap= (int)(nCol.B);

                    int light = 0;

                    Color newColor = Color.FromArgb(

                    (r + light > 255 ? r : r + light),

                    (g + light > 255 ? g : g + light),

                    (bmap+ light > 255 ? bmap: bmap+ light));

                    bmp.SetPixel(x, y, newColor);

                }

            }

        }

        return bmp;

    }

VB:

Private Function ChangeImageColor(source As System.Drawing.Image, nCol As Color) As Bitmap

        Dim bmp As New Bitmap(source)

        For y As Integer = 0 To bmp.Height - 1

            For x As Integer = 0 To bmp.Width - 1

                Dim col As Color = bmp.GetPixel(x, y)

                If col.A <> 0 Then

                    'non alpha or any matched color

                    Dim r As Integer = CInt(nCol.R)

                    Dim g As Integer = CInt(nCol.G)

                    Dim b As Integer = CInt(nCol.B)

                    ' To make the image brighter, increase this number

                    Dim light As Integer = 0

                    ' Create the new gray color

                    Dim newColor As Color = Color.FromArgb((If(r + light > 255, r, r + light)), (If(g + light > 255, g, g + light)), (If(b + light > 255, b, b + light)))

                    bmp.SetPixel(x, y, newColor)

                End If

            Next

        Next

        Return bmp

    End Function

Change the color

I have added 2 buttons to change the text color (Red and Green). On their click write the below given code.

C#:

   protected void Button1_Click(object sender, EventArgs e)

    {

        try

        {

        Color NewCol = Color.Green;       

        Bitmap bmap = new Bitmap(Server.MapPath(Image1.ImageUrl));

        bmap = ChangeImageColor((System.Drawing.Image)bmap, NewCol);

        System.IO.MemoryStream mss = new System.IO.MemoryStream();

        bmap.Save(Server.MapPath("~/images/97.png"), ImageFormat.Png);

        Image1.ImageUrl = "~/images/97.png";

        bmap.Dispose();

          }

        catch (Exception ex)

        { }

    }

    protected void btnred_Click(object sender, EventArgs e)

    {

        try

        {

            Color NewCol = Color.Red;

            Bitmap bmap= new Bitmap(Server.MapPath(Image1.ImageUrl));

            bmap = ChangeImageColor((System.Drawing.Image)bmap, NewCol);

            System.IO.MemoryStream mss = new System.IO.MemoryStream();

            bmap.Save(Server.MapPath("~/images/87.png"), ImageFormat.Png);

            Image1.ImageUrl = "~/images/87.png";

            bmap.Dispose();

        }

        catch (Exception ex)

        { }

    }

VB:

  Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click

        Try

            Dim NewCol As Color = Color.Green

            Dim bmap As New Bitmap(Server.MapPath(Image1.ImageUrl))

            bmap = ChangeImageColor(DirectCast(bmap, System.Drawing.Image), NewCol)

            Dim mss As New System.IO.MemoryStream()

            bmap.Save(Server.MapPath("~/images/97.png"), ImageFormat.Png)

            Image1.ImageUrl = "~/images/97.png"

            bmap.Dispose()

        Catch ex As Exception

        End Try

    End Sub

    Protected Sub btnred_Click(sender As Object, e As System.EventArgs) Handles btnred.Click

        Try

            Dim NewCol As Color = Color.Red

            Dim bmap As New Bitmap(Server.MapPath(Image1.ImageUrl))

            bmap = ChangeImageColor(DirectCast(bmap, System.Drawing.Image), NewCol)

            Dim mss As New System.IO.MemoryStream()

            bmap.Save(Server.MapPath("~/images/87.png"), ImageFormat.Png)

            Image1.ImageUrl = "~/images/87.png"

            bmap.Dispose()

        Catch ex As Exception

        End Try

    End Sub

Build and run the project. Test it.

    In this article we have learn to how to change the text color in image dynamically in asp.net using C# and VB.net. I hope you enjoyed this article.