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?

Answer 1

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:

1. Load Image
2. Create Graphics on that Image
3. Draw into the Graphics and close
4. 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;
}