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

Dynamically generated Bitmap image with aligned data in it

I'm developing an Winforms application to be used for Led displays. The Led display is size 64x32. I created a test bitmap image with 4 cells size 64x16, so I can output it it to the LED display.
When the user enters 4 numbers in the input form, those Strings are then converted to Bitmap Image and placed inside the cells. I somehow got it to work with this method; It edits the same bitmap image, inserts the numbers, and saves it into a new bmp (or am I wrong?).
public static Bitmap Convert_Text_to_Image(string txt, string fontname, int fontsize)
{
//creating bitmap image
Bitmap bmp = new Bitmap("cells.bmp");
//FromImage method creates a new Graphics from the specified Image.
Graphics graphics = Graphics.FromImage(bmp);
// Create the Font object for the image text drawing.
Font font = new Font(fontname, fontsize);
// Instantiating object of Bitmap image again with the correct size for the text and font.
SizeF stringSize = graphics.MeasureString(txt, font);
bmp = new Bitmap(bmp, (int)stringSize.Width, (int)stringSize.Height);
graphics = Graphics.FromImage(bmp);
//Draw Specified text with specified format
graphics.DrawString(txt, font, Brushes.Red, 0, 0);
font.Dispose();
graphics.Flush();
graphics.Dispose();
bmp.Save("cells2.bmp", System.Drawing.Imaging.ImageFormat.Bmp);
return bmp; //return Bitmap Image
}
The output in the PictureBox is This
Now I've created myself multiple problems with the alignment, since I just pasted "bmp numbers" directly onto the "bmp cells"... is there a function of "mapping" the numbers correctly inside the cells, depending if its a single-digit or a two-digit number?
I'm pretty certain there's a way easier way to do all of this, maybe with the DataGridView? I only started using C#, any help would be appreciated.
The image "cells.bmp" is just a test image i created in Paint (xd), rather than that, I'm trying to write a function that will create the Bitmap cells through code
if (want_x_number_cells) {
//create bmp with appropriate number of cells
}

How to save the painted control as a bitmap?

I have a picturebox (pictureBox1), and it gets lines drawn on it, from the paint event. I was wondering how to convert that drawing (with the lines) to a bitmap, and save it as a file. I've tried:
Bitmap bmp = new Bitmap(pictureBox1.Width, pictureBox.Height);
pictureBox1.DrawToBitmap(bmp, pictureBox1.Bounds);
bmp.Save("MyImage.bmp");
But that is a blank image, without the lines. Does anyone know how I can save it with the lines? Thank you.

int bitmapX = 100
int bitmapY = 100
Bitmap imgToSave = new Bitmap(bitmapX, bitmapY);
Graphics gfx = Graphics.FromImage(imgToSave);
// draw on the image with
gfx.DrawLine() // or whatever you want to draw
// save the screenshot
string saveFilePath = Application.StartupPath + "\<name of the image>.png";
imgToSave.Save(saveFilePath, ImageFormat.Png);
This is a code snippet that works for me.

Don't use the PictureBox.Bounds property but instead use a simple Rectangle object/structure filled with the `PictureBox' width and height like this:
var bitmap = new Bitmap(pictureBox1.Width, pictureBox1.Height);
pictureBox1.DrawToBitmap(bitmap, new Rectangle(0, 0, pictureBox1.Width, pictureBox1.Height));
bitmap.Save("c:\\temp\\image.bmp");
Using the Bounds property you are fetching the correct size of the picture box control, but depending on the position not the 0,0 coordinate, but the control position, which leads to an empty bitmap.

Image manipulation - converting transparent pixels before saving as jpg

I'm saving a an image with a transparent background to jpeg.
Is there a way to convert the transparent pixels to a certain color without iterating on all the pixels?
This is the code I'm using (also - is the first line a common way to do it? are there different encoders?)
public void SaveImage(Bitmap image, string path)
{
var encoder = ImageCodecInfo.GetImageEncoders().FirstOrDefault(c => c.MimeType == "image/jpeg");
var encodeParams = new EncoderParameters(1);
encodeParams.Param[0] = new EncoderParameter(Encoder.Quality, (long)100);
image.Save(path, encoder, encodeParams);
}

image.MakeTransparent(image.GetPixel(0, 0));
But this can saved as png because sadly jpg doesn't support transparency

The usual solution is to make a bitmap image with your desired background color, render your image to it, and save/convert this bitmap as an image.
Check Graphics.FromImage. This will give you a Graphics rendering object for a bitmap.

Icon to Image - transparency issue

I'm trying to build a treeview like file list in a richtext box.
It should look like an explorer treeview. My code is able to get an resize the icon, but the transparency is missing (light gray background instead of transparency). What do I need to change here? Is the Image format wrong?
Is there a better way to add an image to a richtextbox?
// Get file info
FileInfo f = new FileInfo("myfile.name");
// Get icon for fileinfo
Icon ico = Icon.ExtractAssociatedIcon(f);
// Convert icon to bitmap
Bitmap bm = ico.ToBitmap();
// create new image with desired size
Bitmap img = new Bitmap(16,16,PixelFormat.Frmat32bpRgb);
// Create graphics with desired sized image
Graphics g = Graphics.FormImage(img);
// set interpolation mode
g.InterpolationMode = InterpolationMode.HighQualityBiCubic;
// draw/resize image
g.DrawImage(bm, new Rectangle(0,0,16,16), new Rectangle(0, 0, bm.Width, bm,Height), GraphicalUnit.Pixel);
// Paste to clipboard
Clipboard.SetImage(bm);
// Paste in RichtextBox
rtb.Paste();
Example:
Edit:
I've figured out that the image is transparent, but using Clipboard.SetImage() doesn't publish it as transparent image.
Any ideas why and what can I do to fix it? Do I need to switch to a differn textbox control?

I've had some luck going through Graphics.
Bitmap b = new Bitmap(pbAssetLoaded.Width, pbAssetLoaded.Height);
using (Graphics g = Graphics.FromImage(b))
{
g.DrawIcon(SystemIcons.Information, 0, 0);
}
This draws the icon with transparency to the Bitmap.

Try
img.MakeTransparent();
after you contruct it.
Note that this will change your PixelFormat to Format32bppArgb.