image concatenation in c#

[byrd48]

Hi,
I haven't had much luck searching for guidance on the following
challenge.
I have a .NET app in which I would like to take multiple thumnail
images and combine them into one flat image.
Could someone give me an example of how to take two images, imgA and
imgB and create imgC which would be one image of imgA and imgB side by
side or imgA on top of imgB. If both imgA and imgB are 10pixels x 10
pixels, the side by side version of imgC would be 10pixels x 20 pixels.
Thanks in advance.

Jon

 

[Kevin Spencer]

First, you create an image that is 10X20 pixels in size, and get the
Graphics from it to draw on it. Then you draw the first image on one half,
and the second on the other. For details, see the System.Drawing namespace:

http://msdn.microsoft.com/library/en-us/cpref/html/frlrfSystemDrawing.asp?frame=true

--
HTH,

Kevin Spencer
Microsoft MVP
Professional Numbskull

The man who questions opinions is wise.
The man who quarrels with facts is a fool.

 

[byrd48]

Thanks,
Could you point me to a code example? I've looked around for a day now
and haven't found the solution. I've seen examples of overlaying
watermarks on images, but not taking two images and "gluing them
together" to make one.

thanks again.

Jon

 

[Kevin Spencer]

I don't know where to find a code sample. It's pretty straightforward. Let's
say you have 2 images, each is 10X10 pixels in size. You want to put
"imageA" on the left, and "imageB" on the right. You create a 20X10 image,
get the Graphics from it, and draw each image at its original size. The only
difference is that you draw "imageA" at location (0,0) and "imageB" at
location (10,0).

--
HTH,

Kevin Spencer
Microsoft MVP
Professional Numbskull

The man who questions opinions is wise.
The man who quarrels with facts is a fool.

 

[byrd48]

Here's the code I'm trying:

System.Drawing.Graphics g;
System.Drawing.Bitmap newImg = new Bitmap(600, 200);
System.Drawing.Image img1 =
System.Drawing.Image.FromFile(Server.MapPath("./images/") +
"airport_r1_c2.gif");
System.Drawing.Image img2 =
System.Drawing.Image.FromFile(Server.MapPath("./images/") +
"airport_r2_c2_f2.gif");
g = System.Drawing.Graphics.FromImage(newImg);
g.DrawImage(img1,0,0);
g.DrawImage(img2, 281, 0);
g.Save();
newImg.Save(Server.MapPath("./images/") + "NewBitmap.jpg");


System.Runtime.InteropServices.ExternalException was unhandled by user
code
Message="A generic error occurred in GDI+."
Source="System.Drawing"
ErrorCode=-2147467259
StackTrace:
at System.Drawing.Image.Save(String filename, ImageCodecInfo
encoder, EncoderParameters encoderParams)
at System.Drawing.Image.Save(String filename, ImageFormat
format)
at System.Drawing.Image.Save(String filename)
at Default2.Page_Load(Object sender, EventArgs e) in
c:\Inetpub\wwwroot\Test\Default2.aspx.cs:line 28
at System.Web.Util.CalliHelper.EventArgFunctionCaller(IntPtr fp,
Object o, Object t, EventArgs e)
at
System.Web.Util.CalliEventHandlerDelegateProxy.Callback(Object sender,
EventArgs e)
at System.Web.UI.Control.OnLoad(EventArgs e)
at System.Web.UI.Control.LoadRecursive()
at System.Web.UI.Page.ProcessRequestMain(Boolean
includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)

 

[Kevin Spencer]

What are the actual dimensions of both images? Considering the fact that
these images are different image types than the Bitmap you're drawing to, I
would suggest using the overload that takes a Rectangle instead of an X and
a Y.

--
HTH,

Kevin Spencer
Microsoft MVP
Professional Numbskull

The man who questions opinions is wise.
The man who quarrels with facts is a fool.

 

[byrd48]

The dimensions of each are 280 x 17. I was making the new bitmap large
enough to accomodate them plus several others.
Thanks,
Jon

 

[Kevin Spencer]

Make the Bitmap large enough to accomodate exactly what you need to draw.
Let me know if the Rectangle solution works for you. It will resize the
image to fit in the Rectangle.

--
HTH,

Kevin Spencer
Microsoft MVP
Professional Numbskull

The man who questions opinions is wise.
The man who quarrels with facts is a fool.

 

[byrd48]

Hi,
I've had some success, however the placement of images is still not
working as I think it should. In this example, I'm taking one image,
SlotLarge.jpg and am placing it twice into a new image. The file is 48
x 67. I'm placing the first instance at (0, 0) and the second at (0,
68), so they should be one over the other. What's happening though is
the second one is overlapping the first one. You can see the files at:
http://www.byrd48.net/imagetest.htm

The code is below. Thanks again.

m_fileDir =
@"c:\inetpub\wwwroot\pfs\images\machines\45countlarge\";

m_Bitmap = new Bitmap(320, 600);
Graphics g = Graphics.FromImage(m_Bitmap);

System.Drawing.Image _img =
System.Drawing.Image.FromFile(m_fileDir + "SlotLarge.jpg");
g.DrawImage(_img, 0, 0);

g.DrawImage(_img, 0, 68);

m_Bitmap.Save(m_fileDir + "testimage.jpg",
System.Drawing.Imaging.ImageFormat.Jpeg);

 

[Kevin Spencer]

It is important to follow instructions carefully. Do you remember when I
recommended that you use the overload of the DrawImage method that takes a
destination rectangle? Your image is being drawn larger than it is
originally. I mentioned that, due to the different image formats, the image
scaling might be necessary. Also, if you had only made the area exactly the
size you need to draw to (also recommended earlier), you would have seen
immediately that the image was not the same size in the bitmap.

--
HTH,

Kevin Spencer
Microsoft MVP
Professional Numbskull

The man who questions opinions is wise.
The man who quarrels with facts is a fool.

 

[byrd48]

Thanks,
As it turns out, there are methods with width and height parameters, so
all I had to do was add them:

instead of: g.DrawImage(_img, 0, 0);

it should have been: g.DrawImage(_img, 0, 0, w, h);