Develop Reference

CSharp Windows Form Picturebox Draw Small Image Without Quality Loss

I'm trying to create a level editor using Windows Forms for my monogame project and need to draw small pixel based images to a picture box with no quality loss when scaled. In monogame when I need to do this I can just set the draw type to PointClamp and then each pixel is drawn as is instead of being pixelated when zoomed; I was hoping for something like this via a picturebox. Right now it looks like this But I'd prefer a more crisp and clean image like this (The second is how it'll appear in monogame). I haven't uploaded any code for this, but just assume I grabbed an image from the filestream and used the bitmap constructor to scale it up (don't think that's relevent but I'll just put it out there).
Image croppedImage, image = tileMap.tileBox.Image;
var brush = new SolidBrush(Color.Black);
try { croppedImage = CropImage(image, tileMap.highlightedRect); } catch {
return; // If crop target is outside bounds of image then return
}
float scale = Math.Min(higlightedTileBox.Width / croppedImage.Width, higlightedTileBox.Height / image.Height);
var scaleWidth = (int)(higlightedTileBox.Width * scale);
var scaleHeight = (int)(higlightedTileBox.Height * scale);
try { higlightedTileBox.Image = new Bitmap(croppedImage, new Size(scaleWidth, scaleHeight)); } catch {
return; // Image couldn't be scaled or highlighted tileBox couldn't be set to desired image
}
CropImage:
private static Image CropImage(Bitmap img, Rectangle cropArea) {
return img.Clone(cropArea, img.PixelFormat);
}
private static Image CropImage(Image img, Rectangle cropArea) {
return CropImage(new Bitmap(img), cropArea);
}
The code above is my current method in it's entirety. tileMap is a form and tilebox is the picturebox within that form.image is the full spritesheet texture before being cropped to what the user has highlighted. After being cropped I attempt to set the current picturebox (highlightedTileBox's) image to a scaled up version of the cropped image.

So I got a solution by trying around a bit.
It looks like scaling images directly by size is using some sort of interpolation.
To try different interpolation modes supported by Winforms, I created a little demo.
As you can see, every label contains the name of the InterpolationMode and is followed by its resulting image. The original bitmap I used is the small one at the top.
From your question, it looks like you would like to achieve something like NearestNeighbour.
Following code scales bmp and the result is stored in bmp2. Try if that's what you want. Consider building a proper implementation if you're using this as solution (disposing unused bitmaps etc.).
I hope it helps.
Bitmap bmp = new Bitmap("test.bmp");
Bitmap bmp2;
Graphics g = Graphics.FromImage(bmp2=new Bitmap(bmp.Width * 2, bmp.Height * 2));
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.NearestNeighbor;
g.DrawImage(bmp, 0, 0, bmp.Width * 2, bmp.Height * 2);
g.Dispose();

How to get Graphic's object with out using a control in c# using GDI+?

I need to create a drawing with a circle and text embeded to it .This drawing is outputted as Image file (Jpeg/Jpg/svg/Png) using c# GDI+ .
Since i dont want to display the UI directly on a form ,how do i get the graphic's object to start drawing.
Thanks in advance.

You can create a new Bitmap passing the size for the image:
using (Bitmap myBitmap = new Bitmap(100, 100)) {
using (Graphics g = Graphics.FromImage(myBitmap)) {
// do your drawing here
}
myBitmap.Save(#"C:\path\for\image.bmp");
}
Optionally you can set the ImageFormat for the image when saving
myBitmap.Save(#"C:\path\for\image.png", ImageFormat.Png);

You create a Bitmap, and get the graphics object from it to draw on:
Bitmap myBitmap = new Bitmap(#"C:\MyImg.bmp");
Graphics g = Graphics.FromImage(myBitmap);
Note that the Bitmap does not need to be created on disk, it can be created in memory too!

How to merge two images in one?

how can I merge canvas in one image ? I need do this because I want to save merge image.
Here is my code:
WriteableBitmap wb = new WriteableBitmap(50, 50);
wb.LoadJpeg(stream);
Image t = new Image();
t.Source = wb;
Canvas.SetLeft(t, 130);
Canvas.SetTop(t, 130);
canvas1.Children.Add(t);
So now I want to merge these two images into one and use my save function.

You can use Graphics.FromImage() and Graphics.DrawImage()
http://msdn.microsoft.com/en-us/library/system.drawing.graphics.fromimage%28v=vs.110%29.aspx
http://msdn.microsoft.com/en-us/library/42807xh1%28v=vs.110%29.aspx
// Pseudo ...
using (Graphics gfx = Graphics.FromImage(image1))
{
gfx.DrawImage(image2, new Point(0, 0));
}
// image1 is now merged with image 2

You have not specified in details what do you mean by "merge". Do you mean, overlay the images on top of each other (if that's the case, what overlay mode? add? multiply? normal?) or merge the images side by side into a larger image (like taking 3 shots with a camera and then combining them into one long photo)? Either way, you will want to look at the System.Drawing namespace.
Assuming the latter one is the case. Here's what you'll do:
Image a = ...;
Image b = ...;
//assuming equal height, and I forget whether the ctor is width first or height first
Image c = new Image(a.Width + b.Width, a.Height);
Graphics g = Graphics.FromImage(c);
g.DrawImage(...); //a lot of overloads, better check out the documentation
SaveImage(c); //depending on how you want to save it
g.Dispose();

You need a third-party library, like WriteableBitmapEx. Look at the Blit method.

Graphics DrawImage causes error with big red X

I have a collection of bitmap images that I am looping through and writing them all to one new bitmap. Basically I am taking a loose collection of bitmaps and writing them all to one bitmap one after another so that they are visible as one image.
When i call dc.DrawImage from one of the bitmaps in the collection onto the new bitmap my winform is showing a big red X in the form. When I set a PictureBox.Image to the newly drawn bitmap I am getting a big red X.
For some reason i cannot find the error anywhere. I am not able to locate the error with debugging.
Now, if I just set the PictureBox.Image to one of the images in the collection of images with-out looping and drawning onto a new bitmap everything works fine.
To make everything ease I am only working with one bitmap that is in the collection and drawing the one bitmap to the new bitmap. So I know I have only one bitmap to get working then i can add the other ones.
In the images below is what the form looks like if i just set the picturebox.image of the image in the collection.
The second image is the error that shows after I loop and drawing the bitmap in the collection to another bitmap.
The code below is what needs to work, but throws an error.
Notice where I am setting the property of the PictureBox.Image like so:
this.picBx.Image = schedule; this causes the error.
But if i set the picturebox.image like so:
this.picBx.Image = schedules[0].Door; it works just fine.
DoorSchedules schedules = GetDoorDrawing(elev, projInfo.ProjectName);
int prevWidth = 0;
//
using (Bitmap schedule = new Bitmap(schedules.Width + 50, schedules.Height + 50))
{
using (Graphics dc = Graphics.FromImage(schedule))
{
using (Pen pen = new Pen(LINE_COLOR))
{
pen.Width = 4;
pen.Color =
Color.FromArgb(50, LINE_COLOR.R, LINE_COLOR.G, LINE_COLOR.B);
//
for (byte i = 0; i < schedules.Count; i++)
{
if (i > 0)
{
dc.DrawLine(pen, prevWidth - 25, 0,
prevWidth - 25, schedule.Height);
};
dc.DrawImage(schedules[i].Door, prevWidth, 0);
prevWidth += schedules[i].Door.Width;
};
};
};
this.picBx.Image = schedule;
this.picBx.BackColor = BACK_COLOR;
this.Size = new System.Drawing.Size(schedule.Width, schedule.Height);
};

You have Bitmap schedule defined in a using statement.
When that using block ends, the bitmap is disposed.

text not showing on bitmap image in C#

I can't seem to get the text I've written to show up on my image Here's the code I'm using
//Creates a bitmap with the path to the current image
Bitmap LabelImage = new Bitmap(dtImages.Rows[intCurrentImage]["ImageURL"].ToString());
Graphics graphic = Graphics.FromImage(LabelImage);
graphic.DrawString("Hello", new Font("Tahoma",40), Brushes.Azure, new System.Drawing.Point(0,0));
//put Image that I just created and put the text on into an Infragistics UltraPicureBox
picImage.Image = LabelImage

You did not update your original image (LabelImage), so why should the text you added to the Graphics object show up?.
From MSDN, Graphics.FromImage:
Creates a new Graphics from the specified Image.
(emphasis mine)
After you have added the text, you need to save the changes:
graphic.Save();
Unrelated to your question, you should really put the creation of the Graphics object in a using statement, to ensure proper disposal:
using(Graphics graphic = Graphics.FromImage(LabelImage))
{
// use graphic here
}

I just tried this
Bitmap bitmap = new Bitmap("C:\\Untitled.png");
Graphics g = Graphics.FromImage(bitmap);
g.DrawString("Hello", new Font("Tahoma", 40), Brushes.Azure, new System.Drawing.Point(0, 0));
pictureBox1.Image = bitmap;
and it works fine for me. Just try to pick a contrasting brush.