Forum Discussion

claudio's avatar
claudio
New Contributor
2 years ago
Solved

How to compare images?

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

  • 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. 

  • 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,

     

  • 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.

5 Replies

  • dermotcanniffe's avatar
    dermotcanniffe
    SmartBear Alumni (Retired)

    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. 

  • 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.

     

     

  • 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's avatar
    Alizaa2
    New Contributor

    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.

  • Doroth's avatar
    Doroth
    New Contributor


    To compare images using TestLeft-Syp, you can follow these general steps:

    Capture Base Image:

    Capture the base image that you want to use as a reference for comparison. This is usually an image of the expected state.
    Capture Current Image:

    Capture the current state of the application or webpage.
    Compare Images:

    Use TestLeft-Syp to compare the base image with the current image. TestLeft-Syp may have specific functions or methods for image comparison.
    Here is a hypothetical example using Python and TestLeft-Syp. Please note that this is a generic example, and you should refer to the TestLeft-Syp documentation for the exact syntax and methods:

    python
    Copy code
    from TestLeft_Syp import TestLeft

    # Start TestLeft-Syp
    test_left = TestLeft()

    # Open your application or navigate to the webpage

    # Capture Base Image
    test_left.capture_base_image("path/to/base_image.png")

    # Capture Current Image
    test_left.capture_current_image("path/to/current_image.png")

    # Compare Images
    image_comparison_result = test_left.compare_images("path/to/base_image.png", "path/to/current_image.png")

    # Check the result and perform actions accordingly
    if image_comparison_result:
        print("Images match. Test passed.")
    else:
        print("Images do not match. Test failed.")

    # Close TestLeft-Syp
    test_left.close()
    In the above example, capture_base_image, apkg stores images ,capture_current_image, and compare_images are placeholder methods. Replace them with the actual methods provided by TestLeft-Syp for capturing and comparing images.

    Make sure to check the TestLeft-Syp documentation for the specific methods and syntax relevant to image comparison in your testing environment.