Develop Reference

Comparing two images using ImageMagick and C#

I want to compare two images and then generate and save an image that will show all the differences that has been found,
for example:
I am using ImageMagick: https://magick.codeplex.com/
But they don't have full documentation for C#.
I found only: http://www.imagemagick.org/Usage/compare/
This code for example show value from 0-1 that represent how similar the pictures are:
MagickImage img1 = new MagickImage(#"C:\test\Image1.jpg");
MagickImage img2 = new MagickImage(#"C:\test\Image2.jpg");
double diff = img1.Compare(img2,new ErrorMetric());
But how can I compare the images using ImageMagick and then save the result as shown in the example above and in their website?
Update:
With the help of dlemstra I wrote the following code and I generate images that suppose to show the difference as in the example above.
MagickImage img1 = new MagickImage(#"C:\test\Image1.jpg");
MagickImage img2 = new MagickImage(#"C:\test\Image2.jpg");
MagickImage img3 = new MagickImage(#"C:\test\Image3.jpg");
MagickImage img4 = new MagickImage(#"C:\test\DiffImage.jpg");
MagickImage img5 = new MagickImage(#"C:\test\DiffImage.jpg");
var imgDiff = new MagickImage();
img1.Compare(img2, new ErrorMetric(), imgDiff);
imgDiff.Write(#"C:\test\Diff4.jpg");
img1.Compare(img3, new ErrorMetric(), imgDiff);
imgDiff.Write(#"C:\test\Diff5.jpg");
img1.Compare(img4, new ErrorMetric(), imgDiff);
imgDiff.Write(#"C:\test\Diff6.jpg");
img5.Compare(img4, new ErrorMetric(), imgDiff);
imgDiff.Write(#"C:\test\Diff7.jpg");
The Strange results are: When I compare the following two images with the marked only difference:
This is the result that I get (And not as the example above from "imageMagick"

You will need to use one of the other overloads of the Compare method for this. The example below demonstrates how to do this:
using (var img1 = new MagickImage(#"C:\test\Image1.jpg"))
{
using (var img2 = new MagickImage(#"C:\test\Image2.jpg"))
{
using (var imgDiff = new MagickImage())
{
double diff = img1.Compare(img2, new ErrorMetric(), imgDiff);
imgDiff.Write(#"C:\test\Diff-Image1-Image2.jpg");
}
}
}
But when you are working with jpeg images (they are lossy) you probably also want to set the ColorFuzz on the first image:
img1.ColorFuzz = new Percentage(5); // adjust this value for your situation
This will make it so that pixels that are almost the same will also match.

Lessons Learned:
Wanted to add some important notes so others hopefully avoid the pitfalls which I ran into when testing out ImageMagick (or any compare tool) for the first time.
Beware of editing in Windows Paint in general.
Don’t edit a *.png with a transparent background in Windows paint and expect a good compare. Windows Paint doesn’t handle transparent background and the png you edited in Paint will now have a white background. The Image will look exactly the same to the naked eye but the image comparers know better.
If you have SnagIt, this is a better tool for making edits to an image when you want to put a image compare tool to the test.
Conclusion:
The code written by #dlemstra does work as expected. Just make sure that when you are testing out the first time that the second image (which you modified) didn’t get unintentionally modified by the image editor that you use. This is a general warning for when you are testing out any image compare tool for the first time to see if you want to use it or not.
Examples:
Example 1: Transparent png + Windows Paint
Downloading a transparent image, making and edit to it in Paint which unintentionally also changes background to white instead of transparent.
Just by opening, then saving the second image in Paint without making any edits to the image will cause the diff to look like this:
I couldn’t figure out what was going on until I compared with Beyond Compare:
Example 2: Complex *.jpg + Windows Paint
Windows Paint was also not good at keeping complex images identical between saves:
The big red areas were changes I had made, but the thin outlines of the roses were changes that Windows Paint made to the picture
Even when I made no changes at all and just open, saved and closed the second image in Paint (and the original image was an image which had also been saved in Paint), Paint still made undesired edits to the picture (dark red dots in image):
I then had an original image which had been saved in Paint and copied this image, opened the second image in snagIt, saved the second image in snagit, and then closed the image and compared the two images (which should have been identical). However, it seemed that snagIt made it’s own modifications to the original ‘Paint saved’ image:
Lastly, I copied the ‘Snagit saved’ image, opened this second image also in SnagIt, made an edit to the second image, saved the image in SnagIt and then closed the image. SnagIt did not make any modifications to this image and the compare showed exactly what I expected:
Lastly:
Most information you find about ImageMagick pertains to using it via the command line. You can add the Magick.Net nuget to your C# project in Visual Studio by installing it via the NuGet Package Manager

Programmatically change jpg in picturebox

I have a simple application in winforms where I need to change the image depending on an if statement. The statement is triggering because other things are also happening. I've looked at the following examples:
Dynamically set Image of a Picturebox in winforms applications?
Change PictureBox's image to image from my resources?
Setting a picture from my Resources programmatically to a PictureBox
and none of these have led me to a solution to why I'm unable to change the image.
Here's what I have tried:
pictureBox1.Image = global::KatReminder.Properties.Resources.angry_orange_cat;
pictureBox1.Refresh();
pictureBox1.Load();
pictureBox1.Image = Image.FromFile(#"\Resources\angry-orange-cat.jpg");
pictureBox1.BackgroundImage = KatReminder.Properties.Resources.angry_orange_cat;
pictureBox1.Refresh();
pictureBox1.Load(#"\Resources\angry-orange-cat.jpg");
In the two examples with files, the full path I'm using has been truncated for this example.

You should try calling pictureBox1.Invalidate(). Usually that works for me when I need to make sure something gets repainted.

Stopping effects from repeating on one another

I posted this question earlier but I have modified my code to a simple algorithm and I still have the same issue as before:
I created a picturebox which, when an effect is selected, it will then change the image in the picturebox using the color matrix.
The issues I'm having is if I choose another effect when one is selected the old effect will not disappear, instead it will just stay there and be underneath the new effect selected. The effects I'm using is sepia and greyscale for now, but can anyone help me so that once one effect is selected, the old effect is cleared rather than them just stacking up on one another. "

The key here is to cache the originalImage in a non-volatile area. For example, load it up into a hidden pictureBox that you don't touch.
When you want to apply an effect, copy the originalImage over into a displayImage picturebox and then apply the effect.

It also looks like you are setting your image to the image that is there. I am not sure but this may be taking into account what you have already set. For example when you set
Image originalImage = pictureBox.Image;
This may be taking the image you have displayed along with any effects you have already applied and setting that as your image to be modified. Like I said I am unsure of this since I can't test it at the moment.
EDIT
The following works for me:
Replace
Bitmap originalImage = (Bitmap)displayPictureBox.Image;
originalImage = (Bitmap)pictureBox.Image.Clone();
With
Image therealoriginalimage = Image.FromFile(#"C:\Users\Me\Desktop\testimg.png");
Bitmap originalImage = (Bitmap)therealoriginalimage;
As both answers mention it looks like you are setting your original image = what is currently in the picture box.
The above code is a quick fix so you can see exactly what was happening. You should modify this and have the originalimage saved as a varible as soon as your app starts. It will be much cleaner than the example above that sets the image each time you call the method

Images Scaling Down in draw in C#

Alright guys last little bit of this project I'll ask for help on I promise.
So I go to load the images, works fine however I notice upon loading that the dimensions of the image have been scaled down in the y to 300 (all are a constant value of 433) and up or down from their original width to 600.
I'm using the following method to load them
foreach (string file in Directory.EnumerateFiles(imagePath, "*.JPG"))
{
Image contents = Image.FromFile(file);
treesImage[count] = contents;
count++;
}
and this is the resulting image when I have it loaded.
http://i.stack.imgur.com/Q40kK.png
As you can see the image below the red rectangle is quite small
Any help would be appreciated. If you require any more information please post below and I'll make sure to edit the original question with the relevant information as soon as humanly possible.
EDIT: I am using a simple windows form application and not another graphical framework for my own reasons.
Thanks in advance :)

I'll assume you are using a PictureBox control to display the image.
When someone chooses a tree from your map, you obviously set the PictureBox Image property to the image object referenced by the index in the array. Use the Image object to set the ClientSize of the PictureBox control.
...
Image img = treesImage[idx];
MyPictureBox.SizeMode = PictureBoxSizeMode.Normal;
MyPictureBox.ClientSize = new Size(img.Width,img.Height);
MyPictureBox.Image = img;
...
Alternately you can define one size for your PictureBox and force all the images to be scaled to that size by setting the control SizeMode property to StretchImage declaratively.
I would recommend that you create a simple class (MyImageInfo for example) that would store the Path, Width, and Height of the images found in your first function into a list and then just as before when a user clicks to view an image you set the width and height of the PictureBox and then call the LoadAsync(path) method to get the image. then you aren't storing all images in memory at once, just as you need them since it doesn't look like this requires a lot of quick jumping from image to image.

Is it possible to bypass a "Specified Visual is already a child of another Visual or the root of a CompositionTarget" exception?

I want to move an Image (my hero) in a Grid of Images. When I remove the corridor it moves to and place the hero Image there, the code executes fine (the hero is the only unique image in the grid). But when I place a corridor Image on the hero's previous location, I receive the above mentioned error. I understand that it is because I have like 50 other corridor Images as Children in the Grid with the name "corridorImg".
int newTileIndex = Image_Grid2.Children.IndexOf(heroImg) + map.mapWidth - 1;
int currentTileIndex = Image_Grid2.Children.IndexOf(heroImg);
Image_Grid2.Children.RemoveAt(currentTileIndex);
Image_Grid2.Children.RemoveAt(newTileIndex);
// Tried to solve issue by creating new Image by using clone of the corridor Image, but same exception
Image oldTileImage = new Image();
oldTileImage = corridorImg;
Image_Grid2.Children.Insert(currentTileIndex, oldTileImage);
Image_Grid2.Children.Insert(newTileIndex, heroImg);

I agree with #HighCore that you should use MVVM for this.
Your specific issue though is that you didn't actually clone the Image, you just made a new one and then overwrote the variable it was assigned to. In your second-to-last line, you're re-inserting the original corridorImg, you're just calling it oldTileImage. To truly clone the Image, you need to copy its properties over. If you're using image sources, that would look like:
Image corridorImgClone = new Image();
corridorImgClone.Source = corridorImg.Source;