1

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???

quakkels
  • 11,676
  • 24
  • 92
  • 149
  • System.Drawing.Graphic hold the drawing functions. System.Drawing.Image is just your image. You can read about what it does on MSDN. – Jeroen Aug 02 '10 at 17:50
  • @Jeroen - Oh, so... I assume since I'm not drawing anything new (just layering pics) I would want to use `System.Drawing.Image`. – quakkels Aug 02 '10 at 18:24
  • Layering pics isn't drawing them on top of each other you're saying? Why do you think in both examples System.Drawing.Graphic is used? Right...to draw each picture on top of each other. – Jeroen Aug 02 '10 at 20:34
  • Is the `Graphics gFrame = ... ` a reference to `System.Drawing.Graphic`? – quakkels Aug 02 '10 at 21:38
  • I added a link the Graphics class MSDN page at the bottom of my answer – Jeroen Aug 03 '10 at 01:19
  • thanks for the link! i was looking on msdn but for some reason didn't come across this. – quakkels Aug 04 '10 at 16:17

2 Answers2

3

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();
Oded
  • 489,969
  • 99
  • 883
  • 1,009
  • I take it that `myGraphic.DrawImageUnscaled(imgF,0,0);` positions imgf on top of imgb at x=0 and y=0. is that right? Does this get cranky if I were to feed it pngs? – quakkels Aug 02 '10 at 16:46
  • pngs are fine, as far as I know. And, yes, the parameters are image, x, y. – Oded Aug 02 '10 at 17:01
3

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

Jeroen
  • 4,023
  • 2
  • 24
  • 40
  • Cool. I assume i could change the SavePhoto() method to save a jpg if I wanted to. Is there anything about combining a jpg with a png that requires the destination file to be a png? – quakkels Aug 02 '10 at 16:40
  • Yes, i just took this from a project i did. You can draw any combination of jpg/png on top of eachother and save it to a jpg or png. In this case i was drawing a picture frame border that needed transparent edges so i saved as png. If your destination image doesn't need transparency you can write a jpg. – Jeroen Aug 02 '10 at 16:57