How to compare images?

[claudio]

with the TestLeft-syp I got the object:

  IDriver driver = new LocalDriver();

  IControl image = driver.Find<IProcess>(new ProcessPattern()
       {
         ...
            }, 5).Find<IControl>(new WPFPattern()
            {
                ClrFullClassName = "System.Windows.Controls.ItemsControl"
            }, 3).Find<IControl>(new WPFPattern()
            {
                ClrFullClassName = "System.Windows.Controls.ContentPresenter",
                WPFControlOrdinalNo = 1
            }).Find<IControl>(new WPFPattern()
            {
                WPFControlName = "Image"
            }, 4);
           
            // Image from TestLeft
            Image actuell_Picture = image.Picture();

  // picture to compare with actuell_Picture 
  BitmapImage expe33 = new BitmapImage(new Uri(@"C:\\expectedPicture.bmp"));
  Bitmap exp44 = new Bitmap(@"C:\\expectedPicture.bmp");

 How to compare this actuell_Picture with a stored picture?
I search in stackoverflow for comparing with BitmapImage, Bitmap,...  No one works for me

[dermotcanniffe · Accepted solution]

TestLeft doesn't include an image comparison function, so you would need to import and use some sort of image comparison toolkit, for example this Simple Image Comparison toolkit for .NET  . I should point out that SmartBear do not support 3rd party applications or toolkits, but you may get help from their respective communities. 

[chriscc]

Hi @claudio.

Image comparison is never one size fits all.  Do you want to know if an image is similar, the same, or contains certain features of another image (like image recognition)?  It can become very complicated quickly.

That being said, a very simple, direct pixel color comparison is a good place to start.  We are only interested in the pixels that differ from two same sized images.

This function will take two bitmaps and return a bitmap that is slightly bigger using the diffStip value, highlighting the x and y pixel locations that differ only in color.  There are faster ways to iterate over image pixels, but this is a simple way if speed isn't a concern. (NOTE: The function does not include any error trapping or validation)

     private Bitmap CompareImages(Bitmap bitmap1, Bitmap bitmap2)
        {

            int diffStrip = 2;

            // get the width and height and add a pixels
            // use this to create the overlay of each image plus area on the left/top to show were differences are at.
            Bitmap bmpResult = new Bitmap(bitmap1.Width + diffStrip, bitmap1.Height + diffStrip);

            List<Point> diffPoints = new List<Point>();

            for (int j = 0; j < bitmap1.Width; j++)
            {
                for (int k = 0; k < bitmap1.Height; k++)
                {
                    // get the pixesl and compare
                    if (!bitmap1.GetPixel(j, k).Equals(bitmap2.GetPixel(j, k)))
                        diffPoints.Add(new Point(j, k));
                }
            }
 
            Graphics gSource = Graphics.FromImage(bitmap1);
            Graphics gCompare = Graphics.FromImage(bitmap2);
            Graphics gResult = Graphics.FromImage(bmpResult);

            // draw the images on top of each other...
            gResult.Clear(Color.White);
            gResult.DrawImage(bitmap1, diffStrip, diffStrip);
            gResult.DrawImage(bitmap2, diffStrip, diffStrip);

            // highlight any differences along the top and left edges of the result bitmap
            foreach (Point p in diffPoints)
            {
                for (int j = 0; j < diffStrip; j++)
                {
                    bmpResult.SetPixel(j, diffStrip + p.Y, Color.Red);
                    bmpResult.SetPixel(diffStrip + p.X, j, Color.Red);
                }
            }

            return bmpResult; 
        }

This image displays a dialog showing the first, second and result images.   Notice the difference highlights will be along the top and left side of the returned image.  The variable diffStrip can be set to a value, as in the sample code, or it could be set to a percentage of the passed in bitmap’s width or height.  This would keep it from being too wide/thick for smaller images or to narrow/thin for larger images.

Lastly, the function could be modified to return a Boolean value for your testing needs and the bitmap could be saved to a desired location. Or it could be modified to return any other object type, like KeyValuePair or a custom object that contains the Boolean value and result bitmap.

I hope this helps.

[chriscc · Accepted solution]

Hi @claudio 

Image comparison is never one size fits all.  Do you want to know if an image is similar, the same, or contains certain features of another image (like image recognition)?  It can become very complicated quickly.

That being said, a very simple, direct pixel color comparison is a good place to start.  We are only interested in the pixels that differ from two same sized images.

This function will take two bitmaps and returns a bitmap that is slightly bigger (based on diffStrip value), highlighting the x and y pixel locations that differ only in color.  There are faster ways to compare image pixels, however, if speed isn’t an issue this function should be fine. (NOTE: This function does not have error trapping or validation)

        private Bitmap CompareImages(Bitmap bitmap1, Bitmap bitmap2)
        {

            int diffStrip = 2;

            // get the width and height and add a pixels
            // use this to create the overlay of each image plus area on the left/top to show were differences are at.
            Bitmap bmpResult = new Bitmap(bitmap1.Width + diffStrip, bitmap1.Height + diffStrip);

            List<Point> diffPoints = new List<Point>();

            for (int j = 0; j < bitmap1.Width; j++)
            {
                for (int k = 0; k < bitmap1.Height; k++)
                {
                    // get the pixesl and compare
                    if (!bitmap1.GetPixel(j, k).Equals(bitmap2.GetPixel(j, k)))
                        diffPoints.Add(new Point(j, k));
                }
            }
 
            Graphics gSource = Graphics.FromImage(bitmap1);
            Graphics gCompare = Graphics.FromImage(bitmap2);
            Graphics gResult = Graphics.FromImage(bmpResult);

            // draw the images on top of each other...
            gResult.Clear(Color.White);
            gResult.DrawImage(bitmap1, diffStrip, diffStrip);
            gResult.DrawImage(bitmap2, diffStrip, diffStrip);

            // highlight any differences along the top and left edges of the result bitmap
            foreach (Point p in diffPoints)
            {
                for (int j = 0; j < diffStrip; j++)
                {
                    bmpResult.SetPixel(j, diffStrip + p.Y, Color.Red);
                    bmpResult.SetPixel(diffStrip + p.X, j, Color.Red);
                }
            }

            return bmpResult; 
        }

The image below shows a dialog with the first, second and result images.   Notice the highlights will be along the top and left side of the returned image.  The variable diffStrip can be set to a value, as in the sample code, or it could be set to a percentage of the passed in bitmap’s width or height.  This would keep the highlighted lines from being too wide/thick for smaller images and too narrow/thin for larger images. 

Lastly, the function could be modified to return a Boolean value and save off the result bitmap to a desired locction. Or it could be modified to return an object like KeyValuePair or a custom object that contains the Boolean value and result bitmap.

I hope this helps.

Regards,

[Alizaa2 · Accepted solution]

To compare the `actuell_Picture` with a stored picture (`expe33` in `BitmapImage` format or `exp44` in `Bitmap` format), you can convert the `actuell_Picture` to the desired format and then perform the comparison. Here's how you can do it:

1. Convert `actuell_Picture` to `Bitmap`:
```csharp
Bitmap actualBitmap;
using (MemoryStream memoryStream = new MemoryStream())
{
actuell_Picture.Save(memoryStream, ImageFormat.Png); // Assuming actuell_Picture is in PNG format
actualBitmap = new Bitmap(memoryStream);
}
```

2. Now, you have `actualBitmap` in the same format as `exp44` (assuming both are in BMP format). You can compare them using the `Equals` method:

```csharp
bool imagesAreEqual = actualBitmap.Equals(exp44);
```

If you want to compare `actuell_Picture` with `expe33` in `BitmapImage` format, you can convert `expe33` to a `Bitmap`:

```csharp
Bitmap expectedBitmap;
using (MemoryStream memoryStream = new MemoryStream())
{
expe33.Save(memoryStream);
expectedBitmap = new Bitmap(memoryStream);
}
```

Now, you can compare `actualBitmap` and `expectedBitmap` using the `Equals` method as shown earlier.

Make sure that both images (`actuell_Picture` and the stored image) are in the same format (e.g., PNG, BMP) for accurate comparison. Adjust the format conversions camp camp cursed images accordingly if they are in different formats.