Develop Reference

How to find the bounding rectangle(s) of a given color, withing a bitmap?

I have an Bitmap with various color patterns and I need to find the bounding rectangles of one given color (For example: Red) within the Bitmap. I found some code to process images but unable to figure out how to achieve this.
Any help would be highly appreciated.
This is my code.
private void LockUnlockBitsExample(PaintEventArgs e)
{
// Create a new bitmap.
Bitmap bmp = new Bitmap("c:\\fakePhoto.jpg");
// Lock the bitmap's bits.
Rectangle rect = new Rectangle(0, 0, bmp.Width, bmp.Height);
System.Drawing.Imaging.BitmapData bmpData =
bmp.LockBits(rect, System.Drawing.Imaging.ImageLockMode.ReadWrite,
bmp.PixelFormat);
// Get the address of the first line.
IntPtr ptr = bmpData.Scan0;
// Declare an array to hold the bytes of the bitmap.
int bytes = Math.Abs(bmpData.Stride) * bmp.Height;
byte[] rgbValues = new byte[bytes];
// Copy the RGB values into the array.
System.Runtime.InteropServices.Marshal.Copy(ptr, rgbValues, 0, bytes);
// Set every third value to 255. A 24bpp bitmap will look red.
for (int counter = 2; counter < rgbValues.Length; counter += 3)
rgbValues[counter] = 255;
// Copy the RGB values back to the bitmap
System.Runtime.InteropServices.Marshal.Copy(rgbValues, 0, ptr, bytes);
// Unlock the bits.
bmp.UnlockBits(bmpData);
// Draw the modified image.
e.Graphics.DrawImage(bmp, 0, 150);
}
Edit: The Bitmap contains solid color shapes, multiple shapes with same color can appear. I need to find the bounding rectangle of each shape.
Just like the paint fills color with bucket tool, I need the bounding rectangle of the filled area.
I can provide x, y coordinates of point on Bitmap to find the bound rectangle of color.

You would do this just like any other code where you want to find the min or max value in a list. With the difference that you want to find both min and max in both X and Y dimensions. Ex:
public static Rectangle GetBounds(this Bitmap bmp, Color color)
{
int minX = int.MaxValue;
int minY = int.MaxValue;
int maxX = int.MinValue;
int maxY = int.MinValue;
for (int y = 0; y < bmp.Height; y++)
{
for (int x = 0; x < bmp.Width; x++)
{
var c = bmp.GetPixel(x, y);
if (color == c)
{
if (x < minX) minX = x;
if (x > maxX) maxX = x;
if (y < minY) minY = y;
if (y > maxY) maxY = y;
}
}
}
var width = maxX - minX;
var height = maxY - minY;
if (width <= 0 || height <= 0)
{
// Handle case where no color was found, or if color is a single row/column
return default;
}
return new Rectangle(minX, minY, width, height);
}
There are plenty of resources on how to use LockBits/pointers. So converting the code to use this instead of GetPixel is left as an exercise.

If you are not concerned with the performance, and an exact color match is enough for you, then just scan the bitmap:
var l = bmp.Width; var t = bmp.Height; var r = 0; var b = 0;
for (var i = 0; i<rgbValues.Length, i++)
{
if(rgbValues[i] == 255) // rgb representation of red;
{
l = Math.Min(l, i % bmpData.Stride); r = Math.Max(r, i % bmpData.Stride);
t = Math.Min(l, i / bmpData.Stride); b = Math.Max(b, i / bmpData.Stride);
}
}
if(l>=r) // at least one point is found
return new Rectangle(l, t, r-l+1, b-t+1);
else
return new Rectangle(0, 0, 0, 0); // nothing found

You can search for the first point of each shape that fills a different area on the Bitmap, read a single horizontal row to get the points of the given color, then loop vertically within the horizontal range to get the adjacent points.
Once you get all the points of each, you can calculate the bounding rectangle through the first and last points.
public static IEnumerable<Rectangle> GetColorRectangles(Bitmap src, Color color)
{
var rects = new List<Rectangle>();
var points = new List<Point>();
var srcRec = new Rectangle(0, 0, src.Width, src.Height);
var srcData = src.LockBits(srcRec, ImageLockMode.ReadOnly, src.PixelFormat);
var srcBuff = new byte[srcData.Stride * srcData.Height];
var pixSize = Image.GetPixelFormatSize(src.PixelFormat) / 8;
Marshal.Copy(srcData.Scan0, srcBuff, 0, srcBuff.Length);
src.UnlockBits(srcData);
Rectangle GetColorRectangle()
{
var curX = points.First().X;
var curY = points.First().Y + 1;
var maxX = points.Max(p => p.X);
for(var y = curY; y < src.Height; y++)
for(var x = curX; x <= maxX; x++)
{
var pos = (y * srcData.Stride) + (x * pixSize);
var blue = srcBuff[pos];
var green = srcBuff[pos + 1];
var red = srcBuff[pos + 2];
if (Color.FromArgb(red, green, blue).ToArgb().Equals(color.ToArgb()))
points.Add(new Point(x, y));
else
break;
}
var p1 = points.First();
var p2 = points.Last();
return new Rectangle(p1.X, p1.Y, p2.X - p1.X, p2.Y - p1.Y);
}
for (var y = 0; y < src.Height; y++)
{
for (var x = 0; x < src.Width; x++)
{
var pos = (y * srcData.Stride) + (x * pixSize);
var blue = srcBuff[pos];
var green = srcBuff[pos + 1];
var red = srcBuff[pos + 2];
if (Color.FromArgb(red, green, blue).ToArgb().Equals(color.ToArgb()))
{
var p = new Point(x, y);
if (!rects.Any(r => new Rectangle(r.X - 2, r.Y - 2,
r.Width + 4, r.Height + 4).Contains(p)))
points.Add(p);
}
}
if (points.Any())
{
var rect = GetColorRectangle();
rects.Add(rect);
points.Clear();
}
}
return rects;
}
Demo
private IEnumerable<Rectangle> shapesRects = Enumerable.Empty<Rectangle>();
private void pictureBox1_MouseClick(object sender, MouseEventArgs e)
{
var sx = 1f * pictureBox1.Width / pictureBox1.ClientSize.Width;
var sy = 1f * pictureBox1.Height / pictureBox1.ClientSize.Height;
var p = Point.Round(new PointF(e.X * sx, e.Y * sy));
var c = (pictureBox1.Image as Bitmap).GetPixel(p.X, p.Y);
shapesRects = GetColorRectangles(pictureBox1.Image as Bitmap, c);
pictureBox1.Invalidate();
}
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
if (shapesRects.Any())
using (var pen = new Pen(Color.Black, 2))
e.Graphics.DrawRectangles(pen, shapesRects.ToArray());
}

Draw angled rectangle on bitmap

I have a picture containing text :
I made a method to detect text rows. This method return the 4 corners for the text zone (always sorted) :
I want to modify the bitmap to draw a rectangle (with transparence) from theses 4 corners. Something like this :
I have my image in gray scale. I created a function to draw a rectangle, but I only achieve to draw a right rectangle :
public static void SaveDrawRectangle(int width, int height, Byte[] matrix, int dpi, System.Drawing.Point[] corners, string path)
{
System.Windows.Media.Imaging.WriteableBitmap wbm = new System.Windows.Media.Imaging.WriteableBitmap(width, height, dpi, dpi, System.Windows.Media.PixelFormats.Bgra32, null);
uint[] pixels = new uint[width * height];
for (int Y = 0; Y < height; Y++)
{
for (int X = 0; X < width; X++)
{
byte pixel = matrix[Y * width + X];
int red = pixel;
int green = pixel;
int blue = pixel;
int alpha = 255;
if (X >= corners[0].X && X <= corners[1].X &&
Y >= corners[0].Y && Y <= corners[3].Y)
{
red = 255;
alpha = 255;
}
pixels[Y * width + X] = (uint)((alpha << 24) + (red << 16) + (green << 8) + blue);
}
}
wbm.WritePixels(new System.Windows.Int32Rect(0, 0, width, height), pixels, width * 4, 0);
using (FileStream stream5 = new FileStream(path, FileMode.Create))
{
PngBitmapEncoder encoder5 = new PngBitmapEncoder();
encoder5.Frames.Add(BitmapFrame.Create(wbm));
encoder5.Save(stream5);
}
}
How can I draw a rectangle from 4 corners ?

I modify my condition by replacing with that code:
public static void SaveDrawRectangle(int width, int height, Byte[] matrix, int dpi, List<Point> corners, string path)
{
System.Windows.Media.Imaging.WriteableBitmap wbm = new System.Windows.Media.Imaging.WriteableBitmap(width, height, dpi, dpi, System.Windows.Media.PixelFormats.Bgra32, null);
uint[] pixels = new uint[width * height];
for (int Y = 0; Y < height; Y++)
{
for (int X = 0; X < width; X++)
{
byte pixel = matrix[Y * width + X];
int red = pixel;
int green = pixel;
int blue = pixel;
int alpha = 255;
if (IsInRectangle(X, Y, corners))
{
red = 255;
}
pixels[Y * width + X] = (uint)((alpha << 24) + (red << 16) + (green << 8) + blue);
}
}
wbm.WritePixels(new System.Windows.Int32Rect(0, 0, width, height), pixels, width * 4, 0);
using (FileStream stream5 = new FileStream(path, FileMode.Create))
{
PngBitmapEncoder encoder5 = new PngBitmapEncoder();
encoder5.Frames.Add(BitmapFrame.Create(wbm));
encoder5.Save(stream5);
}
}
public static bool IsInRectangle(int X, int Y, List<Point> corners)
{
Point p1, p2;
bool inside = false;
if (corners.Count < 3)
{
return inside;
}
var oldPoint = new Point(
corners[corners.Count - 1].X, corners[corners.Count - 1].Y);
for (int i = 0; i < corners.Count; i++)
{
var newPoint = new Point(corners[i].X, corners[i].Y);
if (newPoint.X > oldPoint.X)
{
p1 = oldPoint;
p2 = newPoint;
}
else
{
p1 = newPoint;
p2 = oldPoint;
}
if ((newPoint.X < X) == (X <= oldPoint.X)
&& (Y - (long)p1.Y) * (p2.X - p1.X)
< (p2.Y - (long)p1.Y) * (X - p1.X))
{
inside = !inside;
}
oldPoint = newPoint;
}
return inside;
}
It works but have 2 failings :
generated images are very big (base image take 6 Mo and after drawing 25 Mo)
generation take several time (my images are 5000x7000 pixels, process take 10 seconds)
There is probably a better way, but this way is working good.

fast way to create a big bitmap from an array of bitmap?

I have this code,
copy/paste in a new winform app and this will write a file on your desktop if you run it: test123abcd.png
Private Sub Form1_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load
Dim SquareSize = 5
Dim GridX = 2500
Dim GridY = 2500
Dim SquareCount = GridX * GridY - 1
Dim sw As New Stopwatch
Dim Rect(4) As Rectangle
Rect(0) = New Rectangle(0, 3, 3, 1)
Rect(1) = New Rectangle(3, 0, 1, 3)
Rect(2) = New Rectangle(3, 3, 3, 1)
Rect(3) = New Rectangle(0, 0, 1, 3)
Dim fullsw = Stopwatch.StartNew
Using board = New Bitmap(SquareSize * (GridX + 1), SquareSize * (GridY + 1), Imaging.PixelFormat.Format32bppPArgb)
Using graph = Graphics.FromImage(board)
Using _board = New Bitmap(SquareSize, SquareSize, Imaging.PixelFormat.Format32bppPArgb)
Using g As Graphics = Graphics.FromImage(_board)
For i = 0 To SquareCount
g.Clear(If((i And 1) = 1, Color.Red, Color.Blue))
g.FillRectangles(Brushes.White, Rect)
sw.Start()
graph.DrawImageUnscaled(_board, ((i Mod GridX) * SquareSize), ((i \ GridY) * SquareSize))
sw.Stop()
Next
End Using
End Using
End Using
fullsw.Stop()
board.Save(Environment.GetFolderPath(Environment.SpecialFolder.DesktopDirectory) & "\test123abcd.png", Imaging.ImageFormat.Png)
End Using
MessageBox.Show("Full SW: " & fullsw.ElapsedMilliseconds & Environment.NewLine &
"DrawImageUnscaled SW: " & sw.ElapsedMilliseconds)
End Sub
about 40% to 45% of the time spent is on DrawImageUnscaled, about 23 seconds on my current computer while the whole thing take about 50 seconds
is there a way to speed up DrawImageUnscaled? (and maybe the whole thing?)
EDIT - question in vb.net, answer in c#

By assuming that the generation part (g.FillRectangles(Brushes.White, Rect), pretty time-consuming too) cannot be avoided, the best thing you can do is avoiding a second graph-generation process (also for board) and just copying the information from _board. Copying is much quicker than a new generation (as shown below), but you have the problem that the source information (_board) do not match the destination format (board by relying on .SetPixel) and thus you will have to create a function determining the current pixel (X/Y point) from the provided information (current rectangle).
Below you can see a simple code showing the time requirement differences between both approaches:
Dim SquareSize As Integer = 5
Dim _board As Bitmap = Bitmap.FromFile("in.png")
Dim board As Bitmap = New Bitmap(_board.Width * SquareSize, _board.Height * SquareSize)
For x As Integer = 0 To _board.Width - 1
For y As Integer = 0 To _board.Height - 1
board.SetPixel(x * SquareSize, y * SquareSize, _board.GetPixel(x, y))
Next
Next
board.Save("out1.png", Imaging.ImageFormat.Png)
board = New Bitmap(_board.Width, _board.Height)
Using board
Using graph = Graphics.FromImage(board)
Using _board
Using g As Graphics = Graphics.FromImage(_board)
For x As Integer = 0 To _board.Width - 1
For y As Integer = 0 To _board.Height - 1
graph.DrawImageUnscaled(_board, x, y)
Next
Next
End Using
End Using
End Using
board.Save("out2.png", Imaging.ImageFormat.Png)
End Using
Bear in mind that it is not a "properly-working code". Its whole point is showing how to copy pixels between bitmaps (by multiplying by a factor, just to get different outputs than inputs); and putting the DrawImageUnscaled method under equivalent conditions (although the output picture is, logically, different) to get a good feeling of the differences in time requirements between both methodologies.
As said via comment, this is all what I can do under the current conditions. I hope that will be enough to help you find the best solution.

wow I like unsafe code when it is worthed, solved my problem with c# in the end
here is the code, which is about 70x faster to the code in my question
using System;
using System.Drawing;
using System.Drawing.Imaging;
namespace BmpFile
{
public class BmpTest
{
private const int PixelSize = 4;
public static long Test(int GridX, int GridY, int SquareSize, Rectangle[][] Rect)
{
Bitmap bmp = new Bitmap(GridX * SquareSize, GridY * SquareSize, PixelFormat.Format32bppArgb);
BitmapData bmd = bmp.LockBits(new Rectangle(0, 0, bmp.Width, bmp.Height),
System.Drawing.Imaging.ImageLockMode.ReadWrite,
bmp.PixelFormat);
int Stride = bmd.Stride;
int Height = bmd.Height;
int Width = bmd.Width;
int RectFirst = Rect.GetUpperBound(0);
int RectSecond;
int Offset1, Offset2, Offset3;
int i, j, k, l, w, h;
int FullRow = SquareSize * Stride;
int FullSquare = SquareSize * PixelSize;
var sw = System.Diagnostics.Stopwatch.StartNew();
unsafe
{
byte* row = (byte*)bmd.Scan0;
//draw all rectangles
for (i = 0; i <= RectFirst; ++i)
{
Offset1 = ((i / GridX) * FullRow) + ((i % GridX) * FullSquare) + 3;
RectSecond = Rect[i].GetUpperBound(0);
for (j = 0; j <= RectSecond; ++j)
{
Offset2 = Rect[i][j].X * PixelSize + Rect[i][j].Y * Stride;
w=Rect[i][j].Width;
h=Rect[i][j].Height;
for (k = 0; k <= w; ++k)
{
Offset3 = k * PixelSize;
for (l = 0; l <= h; ++l)
{
row[Offset1 + Offset2 + Offset3 + (l * Stride)] = 255;
}
}
}
}
//invert color
for (int y = 0; y < Height; y++)
{
Offset1 = (y * Stride) + 3;
for (int x = 0; x < Width; x++)
{
if (row[Offset1 + x * PixelSize] == 255)
{
row[Offset1 + x * PixelSize] = 0;
}
else
{
row[Offset1 + x * PixelSize] = 255;
}
}
}
}
sw.Stop();
bmp.UnlockBits(bmd);
bmp.Save(Environment.GetFolderPath(Environment.SpecialFolder.Desktop) + #"\test.png", ImageFormat.Png);
bmp.Dispose();
return sw.ElapsedMilliseconds;
}
}
}

Align text to center in System.Drawing.RectangleF

I am trying to create a captcha image. I am generating a random string and rotating the text with a random angle and trying to create a byte array. Below is my code snippet:
Image img = Image.FromFile(#"C:\Images\BackGround.jpg");
RectangleF myRect = new RectangleF(0, 0, width, height);
objGraphics.DrawImage(img, myRect);
Matrix myMatrix = new Matrix();
int i = 0;
StringFormat formatter = new StringFormat();
formatter.Alignment = StringAlignment.Center;
for (i = 0; i <= myString.Length - 1; i++)
{
myMatrix.Reset();
int charLenght = myString.Length;
float x = width / (charLenght + 1) * i;
float y = height / 30F;
myMatrix.RotateAt(oRandom.Next(-40, 40), new PointF(x, y));
objGraphics.Transform = myMatrix;
objGraphics.DrawString(myString.Substring(i, 1), MyFont, MyFontEmSizes, MyFontStyles,
MySolidBrush, x, Math.Max(width, height) / 50, formatter );
objGraphics.ResetTransform();
}
Every thing is working fine, except that, the first character in my final image on the web page is crossing my left border of the rectangle. How can I align my text to the center of the rectangle?
Thanks.

ZedGraph: How to label LineItem directly in chart using TextObj?

I'm using ZedGraph in my project and its awesome! But there is still one thing I can't figure out. Im looking for some possibility of plotting description of LineItem directly in chart, like on fig.:
http://www.imagesup.net/?di=113548312290
I tried to use TextObj, but still I have a problem correctly calculate the angle, it doesnt correspond to the slope of line. Can anyone tell my whats wrong? PS: maybe this could be caused by different ranges of X- and Y-Axis, or different length of these axes on the screen?
PointPair ptA = new PointPair(0, 100);
PointPair ptB = new PointPair(100, 0);
PointPairList ppl = new PointPairList();
ppl.Add(ptA);
ppl.Add(ptB);
LineItem myCurve = zedGraphControl1.GraphPane.AddCurve(string.Empty, ppl, Color.Red, SymbolType.Circle);
// centre of line
PointPair pt = new PointPair(0.5 * (ptA.X + ptB.X), 0.5 * (ptA.Y + ptB.Y));
TextObj text = new TextObj("desc", pt.X, pt.Y, CoordType.AxisXYScale, AlignH.Center, AlignV.Center);
text.ZOrder = ZOrder.A_InFront;
double dX = ptB.X - ptA.X;
double dY = ptB.Y - ptA.Y;
float alfa = (float)(Math.Atan2(dY, dX) * (180.0 / Math.PI));
text.FontSpec.Angle = alfa;
zedGraphControl1.GraphPane.GraphObjList.Add(text);
zedGraphControl1.AxisChange();
zedGraphControl1.Invalidate();
zedGraphControl1.Refresh();

// Call this method from the Form_Load method, passing your ZedGraphControl
public void CreateChart( ZedGraphControl zgc )
{
GraphPane myPane = zgc.GraphPane;
// Set the titles and axis labels
myPane.Title.Text = "Demo of Labeled Points";
myPane.XAxis.Title.Text = "Time, Seconds";
myPane.YAxis.Title.Text = "Pressure, Psia";
// Build a PointPairList with points based on Sine wave
PointPairList list = new PointPairList();
const int count = 15;
for ( int i = 0; i < count; i++ )
{
double x = i + 1;
double y = 21.1 * ( 1.0 + Math.Sin( (double)i * 0.15 ) );
list.Add( x, y );
}
// Hide the legend
myPane.Legend.IsVisible = false;
// Add a curve
LineItem curve = myPane.AddCurve( "label", list, Color.Red, SymbolType.Circle );
curve.Line.Width = 2.0F;
curve.Line.IsAntiAlias = true;
curve.Symbol.Fill = new Fill( Color.White );
curve.Symbol.Size = 7;
// Fill the axis background with a gradient
myPane.Chart.Fill = new Fill( Color.White, Color.FromArgb( 255, Color.ForestGreen ), 45.0F );
// Offset Y space between point and label
// NOTE: This offset is in Y scale units, so it depends on your actual data
const double offset = 1.0;
// Loop to add text labels to the points
for ( int i = 0; i < count; i++ )
{
// Get the pointpair
PointPair pt = curve.Points[i];
// Create a text label from the Y data value
TextObj text = new TextObj( pt.Y.ToString( "f2" ), pt.X, pt.Y + offset,
CoordType.AxisXYScale, AlignH.Left, AlignV.Center );
text.ZOrder = ZOrder.A_InFront;
// Hide the border and the fill
text.FontSpec.Border.IsVisible = false;
text.FontSpec.Fill.IsVisible = false;
//text.FontSpec.Fill = new Fill( Color.FromArgb( 100, Color.White ) );
// Rotate the text to 90 degrees
text.FontSpec.Angle = 90;
myPane.GraphObjList.Add( text );
}
// Leave some extra space on top for the labels to fit within the chart rect
myPane.YAxis.Scale.MaxGrace = 0.2;
// Calculate the Axis Scale Ranges
zgc.AxisChange();
}
Source: http://zedgraph.dariowiz.com/index9769.html?title=Point_Label_Demo

I have the same issue. Here's a partial solution I worked up in VB; should be easy enough to translate to C#:
' Calc deltas for x and y
Dim dX As Double = ptB.X - ptA.X
Dim dY As Double = ptB.Y - ptA.Y
' compensate delta x for graph resizing, which affects line slopes
Dim resizeCompensation As Double = 1.0 / (myPane.XAxis.Scale.Max - myPane.XAxis.Scale.Min)
dX = dX * resizeCompensation
' now calculate angle
Dim alfa As Double = Math.Atan2(dY, dX) * (180.0 / Math.PI)
text.FontSpec.Angle = alfa
While the above worked well enough for my purposes, a more comprehensive solution might be had here:
http://sourceforge.net/p/zedgraph/discussion/392232/thread/0d261bc7/