Adding dynamic text to image

Question

I currently have an image which gets displayed to the user, I'm trying to add dynamic text to this image based on two parameters passed in.

The issue I have is when I step through the code it all seems to be working correctly, however when I see the image on the screen after the below code has run it doesn't have the text on it.

Below is my current set up of code:

   public ActionResult GenerateImage(string savingAmount, string savingDest)
    {
        // Hardcoding values for testing purposes.
        savingAmount = "25,000.00";
        savingDest = "Canada";


        PointF firstLocation = new PointF(10f, 10f);
        PointF secondLocation = new PointF(10f, 50f);


        Image imgBackground = Image.FromFile(Server.MapPath("~/assets/img/fb-share.jpg"));

        int phWidth = imgBackground.Width; int phHeight = imgBackground.Height;

        Bitmap bmBackground = new Bitmap(phWidth, phHeight, PixelFormat.Format24bppRgb);

        bmBackground.SetResolution(72, 72);

        Graphics grBackground = Graphics.FromImage(bmBackground);

        Bitmap bmWatermark;
        Graphics grWatermark;

        bmWatermark = new Bitmap(bmBackground);
        bmWatermark.SetResolution(imgBackground.HorizontalResolution, imgBackground.VerticalResolution);

        grWatermark = Graphics.FromImage(bmWatermark);

        grBackground.SmoothingMode = SmoothingMode.AntiAlias;

        // Now add the dynamic text to image 
        using (Graphics graphics = Graphics.FromImage(imgBackground))
        {
            using (Font arialFont = new Font("Arial", 10))
            {
                grWatermark.DrawString(savingAmount, arialFont, Brushes.White, firstLocation);
                grWatermark.DrawString(savingDest, arialFont, Brushes.White, secondLocation);
            }
        }

        imgBackground.Save(Response.OutputStream, ImageFormat.Png);

        Response.ContentType = "image/png";

        Response.Flush();
        Response.End();


        return null;

    }

As mentioned after this code has run, I then see the image in the browser however text is not displayed on the image, can anyone see / suggest what maybe causing this issue?

At first glance the code looks fine; can it be a __browser refresh__ problem? Can you check the result in the file system? Also: you __did__ change from `jpg` to `png` on __purpose__, right? — TaW, Mar 17 '16 at 03:25
@David is right, you are using two Graphics objects when you should be using one! (And one is not disposed of!) — TaW, Mar 17 '16 at 07:02

score 2 · Accepted Answer · answered Mar 17 '16 at 06:33

I feel like there are way to many images in that code for what you are describing as the intent of the code. What you want should reduce to this:

Load Image
Create Graphics on that Image
Draw into the Graphics and close
Output image to client

In the code sample you provided you are opening the Graphics on imgBackground then drawing into the grWatermark graphics which is opened earlier on against an image you never touch again.

public ActionResult GenerateImage(string savingAmount, string savingDest)
{
    // Hardcoding values for testing purposes.
    savingAmount = "25,000.00";
    savingDest = "Canada";

    PointF firstLocation = new PointF(10f, 10f);
    PointF secondLocation = new PointF(10f, 50f);

    Image imgBackground = Image.FromFile(Server.MapPath("~/assets/img/fb-share.jpg"));
    using (Graphics graphics = Graphics.FromImage(imgBackground))
    {
        using (Font arialFont = new Font("Arial", 10))
        {
            graphics.DrawString(savingAmount, arialFont, Brushes.White, firstLocation);
            graphics.DrawString(savingDest, arialFont, Brushes.White, secondLocation);
        }
    }

    imgBackground.Save(Response.OutputStream, ImageFormat.Png);

    Response.ContentType = "image/png";

    Response.Flush();
    Response.End();

    return null;
}

Adding dynamic text to image

1 Answers1