How could I position multiple transparent PNGs onto a JPG using c# and asp.net?

Question

Hello SO,

I would like to write an application that would allow a web user to upload a jpg and position transparent pngs on top of that uploaded image. The number of layers, positioning of the layers, and that actual image file information will be collected and manipulated using javascript and CSS.

After I have the image files and the x-y-z coordinates for the transparent pngs, how can I create a single jpg from these images? Do you guys have a good starting point that I can go to for research?

Edit

Hey there, The first two answers I got both seem to do the job. What are the differences between using System.Drawing.Graphics and using System.Drawing.Image???

Answer 1

Here is one article, where the author adds a watermark image to an existing image.

The core of the operation is this:

 System.Drawing.Graphics myGraphic = null;
 Image imgB;
 imgB = Image.FromFile(ImageBack);
 Image imgF;
 imgF = Image.FromFile(ImageFore);
 Image m;
 m = Image.FromFile(ImageBack);
 ...
 myGraphic = System.Drawing.Graphics.FromImage(m);
 myGraphic.DrawImageUnscaled(imgB,0,0);
 myGraphic.DrawImageUnscaled(imgF,0,0);
 myGraphic.Save();

Answer 2

Here's some code i use (modified to show the principle):

private void ProcessPhoto()
        {


            System.Drawing.Image imgThumb = System.Drawing.Image.FromFile("some.jpg");

            // 43w, 35h = offset in frame

            System.Drawing.Image imgFrame = System.Drawing.Image.FromFile("transparent_something.png");

            Bitmap bmImage = new Bitmap(imgThumb);
            bmImage.SetResolution(72, 72);
            Graphics gFrame = Graphics.FromImage(imgFrame);
            gFrame.DrawImage(bmImage, new Point(38, 44)); // offset point of where you want to draw

            gFrame.Dispose();

            SavePhoto(imgFrame, "dest.png");

            imgFrame.Dispose();           
            imgThumb.Dispose();

        }

        private void SavePhoto(System.Drawing.Image img, string fileName)
        {
            string ext = Path.GetExtension(fileName);
            fileName = fileName.Replace(ext, ".png");            

            img.Save(fileName, GetImageEncoder("PNG"), null);
        }

Edit: Read all about the Graphics class here