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);

             }
         }

You can load a footer from another image and combine them using Graphics.FromImage. Sorry for the short answer, I am writing from the phone. However, I am pretty sure there are many answers on StackOverflow about "combine images". Take a look at this http://stackoverflow.com/questions/7206510/combine-two-images-into-one-new-image http://stackoverflow.com/questions/6383123/merge-two-images-to-create-a-single-image-in-c-net — Yeldar Kurmangaliyev, May 29 '15 at 16:27
@ Yeldar Kurmangaliyev How to create footer of same width of Original Image? Did you mean like this. Bitmap bitmapImg = new Bitmap(img); Graphics graphics = Graphics.FromImage(bitmapImg); graphics.DrawString("my comment", new Font("Tahoma", 60), Brushes.Red, 0, 0); bitmapImg.Save(localpath, img.RawFormat); — Vivek Ranjan, May 29 '15 at 16:29
Yes. You need to calculate the proper location and size of an added string. — Yeldar Kurmangaliyev, May 29 '15 at 16:30

Przemysław Ładyński · Answer 1 · 2015-05-29T17:01:38.190

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;
}

Can you create a footer in runtime instead taking from some source — Vivek Ranjan, May 29 '15 at 16:58
@VivekRanjan Sure, just updated my post with sample method that creates black footer with white text at runtime. You can draw in similar way whatever you like even combine drawing image + text (like logo+url) or whatever else. — Przemysław Ładyński, May 29 '15 at 17:02

Vivek Ranjan · Answer 2 · 2015-05-30T16:33:28.567

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.

Here is the pic

Adding footer to image in C#

2 Answers2