Adding footer to image in C#

Question

I am using GetUserMedia API to capture image and draw it to canvas. Using toDataURL() of canvas I get the "ImageUrl". The url is saved as png image to local file. What I am looking is that before saving the image add some comment about image at bottom of image(not over the image) like a footer. I have the below code. Can any one suggest me how to do this in c#.

     imageByte= Convert.FromBase64String(ImageUrl);
     using (var streamBitmap = new MemoryStream(imageByte))
        {
            using (var img = Image.FromStream(streamBitmap))
            {
                  img.Save(localPath);

             }
         }

Answer 1

You can create new Bitmap which will be higher from the original image to fit also the footer below. Next copy the original image and footer to that bitmap and save the new bitmap.

The method to do would like this (assuming the footer width <= image width):

public Bitmap AppendImageFooter(System.Drawing.Image bmp, System.Drawing.Image footer)
{
    //Create new image that will be bigger then original image to make place for footer
    Bitmap newImage = new Bitmap(bmp.Height+footer.Height,bmp.Width);

    //Get graphics from new Image and copy original image and next footer below
    Graphics g = Graphics.FromImage(newImage);
    g.DrawImage(bmp, new Point(0, 0));
    g.DrawImage(footer, new Point(0, bmp.Height));
    g.Dispose();

    return newImage;
}

And you can fit it in your code at this place:

var footer = Image.FromFile("path_to_your_footer.png");      
imageByte= Convert.FromBase64String(ImageUrl);
         using (var streamBitmap = new MemoryStream(imageByte))
            {
                using (var img = Image.FromStream(streamBitmap))
                {
                      var imageWithFooter = AppendImageFooter(img, footer);
                      imageWithFooter.Save(localPath);

                 }
             }

Edited in reply to additional question from comments:

You can build the footer in runtime. Sample code below, of course you can draw whatever you like in whatever style you like:

public Bitmap AppendImageFooter(System.Drawing.Image bmp, string text)
{
    //Create new image that will be bigger then original image to make place for footer
    Bitmap newImage = new Bitmap(bmp.Height+200,bmp.Width);

    //Get graphics and copy image and below the footer
    Graphics g = Graphics.FromImage(bmp);
    g.DrawImage(bmp, new Point(0, 0));
    g.FillRectangle(new SolidBrush(Color.Black), 0, bmp.Height, bmp.Width, 200);
    g.DrawString(text, new Font("Arial", 14), new SolidBrush(Color.White), 20, bmp.Height + 20);
    //Anything else you like, circles, rectangles, texts etc..
    g.Dispose();

    return newImage;
}

Answer 2

Here is the simplest way: I just created new image(footer), a new Image on which old image + footer image is drawn.

                    int footerHeight = 30;
                    Bitmap bitmapImg = new Bitmap(img);// Original Image
                    Bitmap bitmapComment = new Bitmap(img.Width, footerHeight);// Footer
                    Bitmap bitmapNewImage = new Bitmap(img.Width, img.Height + footerHeight);//New Image
                    Graphics graphicImage = Graphics.FromImage(bitmapNewImage);
                    graphicImage.Clear(Color.White);
                    graphicImage.DrawImage(bitmapImg, new Point(0, 0));
                    graphicImage.DrawImage(bitmapComment, new Point(bitmapComment.Width, 0));
                    graphicImage.DrawString("Hi, This is Vivek !", new Font("Arial", 15), new SolidBrush(Color.Black), 0, bitmapImg.Height + footerHeight / 6);
                    bitmapNewImage.Save(yourImagePath);
                    bitmapImg.Dispose();
                    bitmapComment.Dispose();
                    bitmapNewImage.Dispose();

'img' is the original Image.