We Keep Coding

Lines drawn on a large Bitmap are not visible when the image is saved

I have created a program to draw square grids on a selected image. It works fine for images that has small resolution, but it doesn't work properly on large images.
The all grid lines are not visible seem when the image is saved as file.
The image I am testing has resolution 3600x4320 and can be shown in the link.
How can I fix this problem?
My code:
Image drawGrid(int n, string imgPath)
{
Image img = Image.FromFile(imgPath);
Graphics grp = Graphics.FromImage(img);
grp.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
float m = img.Width * 1f / n;
for (int i = 1; i < n; i++)
{
var x = new PointF(i * m, 0);
var y = new PointF(i * m, img.Height);
grp.DrawLine(Pens.Red, x, y);
}
for (int i = 1; i <= (int)(this.Height / m); i++)
{
var x = new PointF(0, i * m);
var y = new PointF(img.Width, i * m);
grp.DrawLine(new Pen(Color.Red, 5f), x, y);
}
return img;
}
void BtnExportClick(object sender, EventArgs e)
{
if(saveFileDialog1.ShowDialog() == DialogResult.OK)
{
int n = (int)numericUpDown1.Value;
drawGrid(n, txtImagePath.Text).Save(saveFileDialog1.FileName, System.Drawing.Imaging.ImageFormat.Jpeg);
MessageBox.Show("Done");
}
}
The result image is below (resolution reduced to upload)
The grid lines not shown correctly.

The major problem is in this line:
for (int i = 1; i <= (int)(this.Height / m); i++)
▶ this.Height is clearly not what you wanted to write, let's replace it with the Image.Height
▶ grp.DrawLine(Pens.Red, x, y); and grp.DrawLine(new Pen(Color.Red, 5f), x, y); will draw lines of different size (1 and 5 pixels). In the sample code, the two methods accept Color and float arguments that define the Pen color and size.
▶ grp.SmoothingMode: we don't want any smoothing mode here, not needed to draw straight lines and it will add anti-alias which will be clearly visible, especially when saving the Image in JPEG format (it will anti-alias - sort of, it actually mangles the colors - these lines by itself).
▶ You're not disposing of any of the Graphics object you create. This is quite important with both frequent graphics operations and when working with large Bitmaps.
The Pen and Graphics objects needs to be disposed.
Since it's not exactly clear if you want to generate a grid that has the same number of lines in both dimensions - hence, a grid with Cells in which the Width is not equal to the Height, most probably - or a grid with squared Cells (this is what the sample Image seems to show, not the code), I posted two method that draw both grid types:
First method, same number of lines in both width and height:
var gridSizeX = (float)image.Width / lines;
var gridSizeY = (float)image.Height / lines;
private Image DrawGridLines(int lines, string imgPath, Color penColor, float penSize)
{
var image = Image.FromStream(new MemoryStream(File.ReadAllBytes(imgPath)), true);
using (var g = Graphics.FromImage(image)) {
g.PixelOffsetMode = PixelOffsetMode.Half;
var gridSizeX = (float)image.Width / lines;
var gridSizeY = (float)image.Height / lines;
for (int i = 1; i < lines; i++) {
var pointX1 = new PointF(0, i * gridSizeY);
var pointX2 = new PointF(image.Width, i * gridSizeY);
var pointY1 = new PointF(i * gridSizeX, 0);
var pointY2 = new PointF(i * gridSizeX, image.Height);
using (var pen = new Pen(penColor, penSize)) {
g.DrawLine(pen, pointX1, pointX2);
g.DrawLine(pen, pointY1, pointY2);
}
}
return image;
}
}
Second method, drawing a squared grid. The integer value, gridSection, is used to define a grid Cell based on the minimum dimension of the Bitmap.
This dimension is then used to determine how many lines to draw in the other dimension.
The grid size is calculated on the minimum dimension:
var gridSize = (float)Math.Min(image.Width, image.Height) / gridSection;
And the Cell are determined as a consequence:
var gridStepMin = Math.Min(image.Width, image.Height) / gridSize;
var gridStepMax = Math.Max(image.Width, image.Height) / gridSize;
private Image DrawSquaredGrid(int gridSection, string imgPath, Color penColor, float penSize)
{
var image = Image.FromStream(new MemoryStream(File.ReadAllBytes(imgPath)), true);
using (var g = Graphics.FromImage(image)) {
g.PixelOffsetMode = PixelOffsetMode.Half;
var gridSize = (float)Math.Min(image.Width, image.Height) / gridSection;
var gridStepMin = Math.Min(image.Width, image.Height) / gridSize;
var gridStepMax = Math.Max(image.Width, image.Height) / gridSize;
for (int i = 1; i < gridStepMin; i++) {
var pointY1 = new PointF(i * gridSize, 0);
var pointY2 = new PointF(i * gridSize, image.Height);
using (var pen = new Pen(penColor, penSize)) {
g.DrawLine(pen, pointY1, pointY2);
}
}
for (int i = 1; i < gridStepMax; i++) {
var pointX1 = new PointF(0, i * gridSize);
var pointX2 = new PointF(image.Width, i * gridSize);
using (var pen = new Pen(penColor, penSize)) {
g.DrawLine(pen, pointX1, pointX2);
}
}
return image;
}
}
The SaveFileDialog is refactored to allow multiple Image formats. and to call one of the drawing methods based on a selection (in the sample code, a CheckBox (chkSquared) is used select one of the Grid types).
You can add more formats, the ImageFormatFromFileName() methods selects the ImageFormat type based on the SaveFileDialog.FielName extension.
private void BtnExportClick(object sender, EventArgs e)
{
string imagePath = [Some Path];
using (var sfd = new SaveFileDialog()) {
sfd.Filter = "PNG Image (*.png)|*.png|TIFF Image (*.tif)|*.tif|JPEG Image (*.jpg)|*.jpg";
sfd.RestoreDirectory = true;
sfd.AddExtension = true;
if (sfd.ShowDialog() == DialogResult.OK) {
Image image = null;
if (chkSquared.Checked) {
image = DrawSquaredGrid((int)numericUpDown1.Value, imagePath, Color.Red, 5.0f);
}
else {
image = DrawGridLines((int)numericUpDown1.Value, imagePath, Color.Red, 5.0f);
}
image.Save(sfd.FileName, ImageFormatFromFileName(sfd.FileName));
MessageBox.Show("Done");
image.Dispose();
}
}
}
private ImageFormat ImageFormatFromFileName(string fileName)
{
string fileType = Path.GetExtension(fileName).Remove(0, 1);
if (fileType.Equals("tif")) fileType = "tiff";
if (fileType.Equals("jpg")) fileType = "jpeg";
return (ImageFormat)new ImageFormatConverter().ConvertFromString(fileType);
}

How to mirror an image using array

I need to mirror an image and display it like this:
To display like this:
This is my code so far, I have had no luck:
int Height = TransformedPic.GetLength(0);
int Width = TransformedPic.GetLength(1);
for (int i = 0; i < Height; i++)//loop rows
{
for (int j = 0; j < Width; j++)//loop columns
{
TransformedPic[i, j] = TransformedPic[i, ((2 * Width) - (j + 1))];
}
}

Image.RotateFlip will do the job at lot faster and easier:
Bitmap bmp1 = (Bitmap)pictureBox1.Image;
Bitmap bmp2 = new Bitmap(bmp1.Width * 2, bmp1.Height);
using (Graphics G = Graphics.FromImage(bmp2))
{
G.DrawImage(bmp1, 0, 0);
bmp1.RotateFlip(RotateFlipType.RotateNoneFlipX);
G.DrawImage(bmp1, bmp1.Width, 0);
pictureBox2.Image = bmp2;
}
Instead you could use loops similar to yours and Bitmap.GetPixel and Bitmap.SetPixel but that would be really slow:
TransformedPic.SetPixel(Width - i, j, TransformedPic.GetPixel(i,j));
Going over one half of the width..

Or you could do it like this in one line:
picBox.Image.RotateFlip(RotateFlipType.RotateNoneFlipX)

How to change 12-bits and 10-bits raw file to bitmap image using c#

I have 10-bits and 12-bits rawbayer (.raw) file. And i want to convert it to Bitmap image but i am unable to change it. 8-bits or 16-bits raw file changed easily but 10-bits or 12-bits can't be changed.
here is the code for 8-bits raw file to Bitmap.
private void DisplayImage08(string fileName) //Raw file name
{
// Open a binary reader to read in the pixel data.
// We cannot use the usual image loading mechanisms since this is raw
// image data.
try
{
BinaryReader br = new BinaryReader(File.Open(fileName, FileMode.Open));
byte pixByte;
int i;
int iTotalSize = (int)br.BaseStream.Length;
// Get the dimensions of the image from the user
ID = new ImageDimensions(iTotalSize);
width = Convert.ToInt32(ID.txtwidth);
height = Convert.ToInt32(ID.txtheight);
//panel1.Width = width;
//panel1.Height = height;
pictureBox1.Width = width;
pictureBox1.Height = height;
pix08 = new byte[iTotalSize];
//pix08 = new byte[iTotalSize];
for (i = 0; i < iTotalSize; ++i)
{
pixByte = (byte)(br.ReadByte());
pix08[i] = pixByte;
}
br.Close();
int bitsPerPixel = 8;
stride = (width * bitsPerPixel + 7) / 8;
// Single step creation of the image
bmps = BitmapSource.Create(width, height, 96, 96, PixelFormats.Gray8, null,
pix08, stride);
//Bitmap bmp = new Bitmap();
// img.Source = bmps;
Bitmap bt = BitmapFromSource(bmps); //Change Bitmap source to Bitmap
pictureBox1.Image = bt; //Display on pictureBox
pictureBox1.SizeMode = System.Windows.Forms.PictureBoxSizeMode.AutoSize;
}
catch (Exception e)
{
}
}
But i want to change 12-bits or 10 bits raw file to Bitmap.
So please help me on this, that how can i change it?
Thanks

This isn't a complete answer by no means, but this code will convert a 12 or 10 bit image, depending on how the data is packed, to a 8 bit image.
// Input data read from file
var pixels = ...
// Output
var bytes = new byte[width * height];
// Sort data
for (var i = 0; i < bytes.Length; i++)
{
if (i % 2 == 0)
{
var index = i * 3 / 2;
bytes[i] = pixels[index];
}
else
{
var index = (i * 3 + 1) / 2;
bytes[i] = pixels[index];
}
}

Make Image Slowly Visible on Form

The idea is building a windows form application in Visual Studio 2010 using C#.
The program will run a series of operation when the user hit a button.
Is it possible to use a image to show the progress instead of using a progress bar?
So the idea is that the image will start of being invisible, and as the program progress, the image become more and more visible.
0% - invisible
50% - half transparent
100% - visible
I know you can toggle the PictureBox to be visible or not (PictureBox.Visible = true or false;), but is there a way to make it in between?
Any idea is appreciate.

Manipulating images in winforms is slow, so do this as little as possible:
public Bitmap ImageFade( Bitmap sourceBitmap, byte Transparency)
{
BitmapData sourceData = sourceBitmap.LockBits(new Rectangle(0, 0,
sourceBitmap.Width, sourceBitmap.Height),
ImageLockMode.ReadOnly, PixelFormat.Format32bppArgb);
byte[] pixelBuffer = new byte[sourceData.Stride * sourceData.Height];
byte[] resultBuffer = new byte[sourceData.Stride * sourceData.Height];
Marshal.Copy(sourceData.Scan0, pixelBuffer, 0, pixelBuffer.Length);
sourceBitmap.UnlockBits(sourceData);
byte blue = 0;
byte green = 0;
byte red = 0;
byte a = 0;
int byteOffset = 0;
for (int offsetY = 0; offsetY <
sourceBitmap.Height; offsetY++)
{
for (int offsetX = 0; offsetX <
sourceBitmap.Width; offsetX++)
{
blue = 0;
green = 0;
red = 0;
a = 0;
byteOffset = offsetY *
sourceData.Stride +
offsetX * 4;
blue += pixelBuffer[byteOffset];
green += pixelBuffer[byteOffset + 1];
red += pixelBuffer[byteOffset + 2];
a += Transparency;//pixelBuffer[byteOffset + 3];
resultBuffer[byteOffset] = blue;
resultBuffer[byteOffset + 1] = green;
resultBuffer[byteOffset + 2] = red;
resultBuffer[byteOffset + 3] = a;
}
}
Bitmap resultBitmap = new Bitmap(sourceBitmap.Width, sourceBitmap.Height);
BitmapData resultData = resultBitmap.LockBits(new Rectangle(0, 0,
resultBitmap.Width, resultBitmap.Height),
ImageLockMode.WriteOnly, PixelFormat.Format32bppArgb);
Marshal.Copy(resultBuffer, 0, resultData.Scan0, resultBuffer.Length);
resultBitmap.UnlockBits(resultData);
return resultBitmap;
}
I note another answer uses SetPixel. Avoid using that function if possible. It's much faster to edit the underlying bytestream, which is still slow since it's not hardware accelerated, but it's the best of several not-great options
This function can potentially be further optimized, but I leave that as an exercise for the reader

You could always adjust the alpha component of your image:
void SetImageProgress(float percent, Bitmap img)
{
int alpha = (int)(percent / 100.0f * 255.0f);
alpha &= 0xff;
for(int x = 0; x < img.Width; x++)
{
for(int y = 0; y < img.Height; y++)
{
Color c = img.GetPixel(x, y);
c = Color.FromArgb(alpha, c.R, c.G, c.B);
img.SetPixel(x, y, c);
}
}
}

C# winforms code to c# wpf code

I have a drawing application developed in winforms C# which uses many System.Drawing.Bitmap object throughout the code.
Now I am writing it into WPF with c#. I have done almost 90% of the conversion.
Coming to the problem... I have the following code which is used to traverse the image pixel by pixel
Bitmap result = new Bitmap(img); // img is of System.Drawing.Image
result.SetResolution(img.HorizontalResolution, img.VerticalResolution);
BitmapData bmpData = result.LockBits(new Rectangle(0, 0, result.Width, result.Height), ImageLockMode.ReadWrite, img.PixelFormat);
int pixelBytes = System.Drawing.Image.GetPixelFormatSize(img.PixelFormat) / 8;
System.IntPtr ptr = bmpData.Scan0;
int size = bmpData.Stride * result.Height;
byte[] pixels = new byte[size];
int index = 0;
double R = 0;
double G = 0;
double B = 0;
System.Runtime.InteropServices.Marshal.Copy(ptr, pixels, 0, size);
for (int row = 0; row <= result.Height - 1; row++)
{
for (int col = 0; col <= result.Width - 1; col++)
{
index = (row * bmpData.Stride) + (col * pixelBytes);
R = pixels[index + 2];
G = pixels[index + 1];
B = pixels[index + 0];
.
.// logic code
.
}
}
result.UnlockBits(bmpData);
It uses System.Drawing's for the purpose.
Is it possible to achieve this thing in wpf as well keeping it simple as it is?

In addtion to Chris's anwser you might want to look at WriteableBitmap. It's another way to manipulate images pixels.
Example

You can use BitmapImage.CopyPixels to copy the image your pixel buffer.
BitmapImage img= new BitmapImage(...); // This is your image
int bytePerPixel = (img.Format.BitsPerPixel + 7) / 8;
int stride = img.PixelWidth * bytesPerPixel;
int size = img.PixelHeight * stride;
byte[] pixels = new byte[size];
img.CopyPixels(pixels, stride, 0);
// Now you can access 'pixels' to perform your logic
for (int row = 0; row < img.PixelHeight; row++)
{
for (int col = 0; col < img.PixelWidth; col++)
{
index = (row * stride) + (col * bytePerPixel );
...
}
}