Develop Reference

How to compare 2 images and compare them

I am making a video recorder, The app works by taking a lot of screenshots and putting them together into one video. Also, I am trying to make something like screen motion detection. I need the app to take screenshots only when a difference in the screen is detected. I was thinking about how to do that, and I believe I need to make it still take screenshots while comparing them to the previous one. Is there a way to do that?
The code:
//Record video:
public void RecordVideo()
{
//Keep track of time:
watch.Start();
using (Bitmap bitmap = new Bitmap(bounds.Width, bounds.Height))
{
using (Graphics g = Graphics.FromImage(bitmap))
{
//Add screen to bitmap:
g.CopyFromScreen(new Point(bounds.Left, bounds.Top), Point.Empty, bounds.Size);
}
//Save screenshot:
string name = tempPath + "//screenshot-" + fileCount + ".png";
bitmap.Save(name, ImageFormat.Png);
inputImageSequence.Add(name);
fileCount++;
//Dispose of bitmap:
bitmap.Dispose();
}
}

I have something that may be useful for you. The idea is save only the differences between the images and, with that, recreate later all images from starting image and saved changes.
To do this, you only need make a XOR operation in the image bytes. This method allow you get the difference (the array parameter) between two images:
protected void ApplyXor(Bitmap img1, Bitmap img2, byte[] array)
{
const ImageLockMode rw = ImageLockMode.ReadWrite;
const PixelFormat argb = PixelFormat.Format32bppArgb;
var locked1 = img1.LockBits(new Rectangle(0, 0, img1.Width, img1.Height), rw, argb);
var locked2 = img2.LockBits(new Rectangle(0, 0, img2.Width, img2.Height), rw, argb);
try
{
ApplyXor(locked2, locked1, array);
}
finally
{
img1.UnlockBits(locked1);
img2.UnlockBits(locked2);
}
}
With the previous img1 bitmap and the array returned, you can get the img2 with this method:
protected void ApplyXor(Bitmap img1, byte[] array, Bitmap img2)
{
const ImageLockMode rw = ImageLockMode.ReadWrite;
const PixelFormat argb = PixelFormat.Format32bppArgb;
var locked1 = img1.LockBits(new Rectangle(0, 0, img1.Width, img1.Height), rw, argb);
var locked2 = img2.LockBits(new Rectangle(0, 0, img2.Width, img2.Height), rw, argb);
try
{
ApplyXor(locked1, array, locked2);
}
finally
{
img1.UnlockBits(locked1);
img2.UnlockBits(locked2);
}
}
And here the other required methods:
private unsafe void ApplyXor(BitmapData img1, BitmapData img2, byte[] array)
{
byte* prev0 = (byte*)img1.Scan0.ToPointer();
byte* cur0 = (byte*)img2.Scan0.ToPointer();
int height = img1.Height;
int width = img1.Width;
int halfwidth = width / 2;
fixed (byte* target = array)
{
ulong* dst = (ulong*)target;
for (int y = 0; y < height; ++y)
{
ulong* prevRow = (ulong*)(prev0 + img1.Stride * y);
ulong* curRow = (ulong*)(cur0 + img2.Stride * y);
for (int x = 0; x < halfwidth; ++x)
{
if (curRow[x] != prevRow[x])
{
int a = 0;
}
*(dst++) = curRow[x] ^ prevRow[x];
}
}
}
}
private unsafe void ApplyXor(BitmapData img1, byte[] array, BitmapData img2)
{
byte* prev0 = (byte*)img1.Scan0.ToPointer();
byte* cur0 = (byte*)img2.Scan0.ToPointer();
int height = img1.Height;
int width = img1.Width;
int halfwidth = width / 2;
fixed (byte* target = array)
{
ulong* dst = (ulong*)target;
for (int y = 0; y < height; ++y)
{
ulong* prevRow = (ulong*)(prev0 + img1.Stride * y);
ulong* curRow = (ulong*)(cur0 + img2.Stride * y);
for (int x = 0; x < halfwidth; ++x)
{
curRow[x] = *(dst++) ^ prevRow[x];
}
}
}
}
NOTE: You must configure your project to allow unsafe.
With previous methods, you can do:
Save a img1 bitmap
Get img2 bitmap, do XOR and get the array (array2, for example)
With img3, get the XOR with img2 (array3, for example). Now, img2 isn't needed
With img4, get the XOR with img3 (array4). Now, img3 isn't needed
...
You have img1 and array2, array3, array4... and you can recreate all images:
Make XOR between img1 and array2 to get img2
Make XOR between img2 and array3 to get img3
...
If you need send video over TCP, you can send the images sending one image and the XOR arrays (the differences). Or better yet, compress the XOR arrays using K4os.Compression.LZ4.

WriteableBitmap set pixels

I am using WPF and i would like to manipulate some pixels of my image. I am using WritableBitmap because i can use it indirect from source. When i try to set some pixels RGB values (in order), the result is not that i expected.
I use this extension method to read source:
public static PixelColor[,] CopyPixels(this BitmapSource source,out int stride)
{
if (source.Format != PixelFormats.Bgra32)
source = new FormatConvertedBitmap(source, PixelFormats.Bgra32, null, 0);
PixelColor[,] pixels = new PixelColor[source.PixelWidth, source.PixelHeight];
stride = source.PixelWidth * ((source.Format.BitsPerPixel + 7) / 8);
GCHandle pinnedPixels = GCHandle.Alloc(pixels, GCHandleType.Pinned);
source.CopyPixels(
new Int32Rect(0, 0, source.PixelWidth, source.PixelHeight),
pinnedPixels.AddrOfPinnedObject(),
pixels.GetLength(0) * pixels.GetLength(1) * 4, stride);
pinnedPixels.Free();
return pixels;
}
The output struct is
[StructLayout(LayoutKind.Sequential)]
public struct PixelColor
{
public byte Blue;
public byte Green;
public byte Red;
public byte Alpha;
}
this is the simple example code to modify pixels (between 200x200 and 300x300) to black:
int stride = 0;
PixelColor[,] PixelData = wBitmap.CopyPixels(out stride);
for (int i = 0; i < PixelData.GetLength(0); i++)
{
for (int j = 0; j < PixelData.GetLength(1); j++)
{
if ((200 < i && 300 > i) && (200 < j && 300 > j))
{
PixelData[i, j].Blue = 0;
PixelData[i, j].Red = 0;
PixelData[i, j].Green = 0;
}
}
}
wBitmap.WritePixels(new Int32Rect(0, 0, wBitmap.PixelWidth, wBitmap.PixelHeight), PixelData, stride,0);
The surprising result is
This is an image with 500x500 parameters. I expected that the result will be an black filled square in the middle of the image instead of black vertical lines. What is the problem with my example code? (The colorful dots behind the lines are part of the original image.)

Just change the order of the dimensions in the 2-dimensional array declaration in your CopyPixels methods:
var pixels = new PixelColor[source.PixelHeight, source.PixelWidth];

Return raw image bits in a BMP file

I have C# dll that I am using in Matlab to return the raw 8-bit grey scale bits that are stored in a BMP file. (Yes, I know Matlab can read the BMP, but this is a test, for a real system where the data will come from a video frame grabber).
Right now, the code below is returning 1078 bits of header information, that needs to be stripped, and it is also flipping the axis of the image (it comes out in mirror image). What is the best way to fix this (least lines, performance is not not a concern).
image = Image.FromFile(this.imagePath);
ImageConverter converter = new ImageConverter();
data = (byte[])converter.ConvertTo(image, typeof(byte[]));
Frame f = new Frame(data);
public class Frame
{
public byte[,] frameData = new byte[1024, 1024];
public Frame(byte[] data)
{
Buffer.BlockCopy(data, 0, frameData, 0, 1024 * 1024 * sizeof(byte));
}
}

Do you mean something like this:
BitArray bits = new BitArray(returnBytes);
BitArray flippedBits = new BitArray(bits);
for (int i = 0; i < bits.Length; i += width) {
for (int j = 0, k = width - 1; j < width; ++j, --k) {
flippedBits[i + j] = bits[i + k];
}
}
If you need to mirror picture upside-down, use this code:
BitArray bits = new BitArray(returnBytes);
BitArray flippedBits = new BitArray(bits);
for (int i = 0, j = bits.Length - width; i < bits.Length; i += width, j -= width) {
for (int k = 0; k < width; ++k) {
flippedBits[i + k] = bits[j + k];
}
}
Source:
Algorithm to vertically flip a bitmap in a byte array

Scaling an Image Byte Array via Nearest Neighbor

I am trying to scale an image by using a byte array. My plan was to use the nearest neighbor to find the pixel data for the new byte array but I am having some issues transforming the source data of my image. srcImage is of type Image and I am able to successfully convert it to a byte array and convert it back into an image, I am having an issue with scaling that image using its byte array. I use a MemoryStream (in my byteArrayToImage method) to convert the trgData back to an Image but I receive an ArguementException telling me that the 'new MemoryStream(byteArray)' parameter is not valid.
Does anyone happen to know what might be the issue or how to correctly scale a byte array from an Image? For right now, we can assume that I am only scaling and saving png files but I would like to eventually expand this to other image formats.
Here is my code for the copying and scaling of the image data:
byte[] srcData = ImageToByteArraybyImageConverter(srcImage);
// data transformations here
//
float srcRatio = srcImage.Width / srcImage.Height;
int bitsPerPixel = ((int)srcImage.PixelFormat & 0xff00) >> 8;
int bytesPerPixel = (bitsPerPixel + 7) / 8;
int srcStride = 4 * ((srcImage.Width * bytesPerPixel + 3) / 4);
// find max scale value
int scale = 3; // NOTE: temporary
// create new byte array to store new image
int width = srcImage.Width * scale;
int height = srcImage.Height * scale;
int stride = width;
byte[] trgData = new byte[height * stride];
// update the progress bar
progressBar1.Value = 10;
int i = -1; // index for src data
// copy pixel data
for (int n = 0; n < trgData.Length; n++)
{
if (n % stride == 0)
{
i++;
}
trgData[n] = srcData[i];
}
progressBar1.Value = 60;
// convert the pixel data to image
Image newImage = byteArrayToImage(trgData);
progressBar1.Value = 70;
if (newImage != null)
{
// save the image to disk
newImage.Save(newFileName);
progressBar1.Value = 100;
}
Let me know if you have any more questions, and thank you!
Edited: Here are the methods that load and save the byte array
private byte[] ImageToByteArraybyImageConverter(System.Drawing.Image image)
{
ImageConverter imageConverter = new ImageConverter();
byte[] imageByte = (byte[])imageConverter.ConvertTo(image, typeof(byte[]));
return imageByte;
}
private Image byteArrayToImage(byte[] byteArrayIn)
{
Image returnImage = null;
using (MemoryStream ms = new MemoryStream(byteArrayIn))
{
returnImage = Image.FromStream(ms);
}
return returnImage;
}

You are doing a very strange thing here:
int i = -1; // index for src data
// copy pixel data
for (int n = 0; n < trgData.Length; n++)
{
if (n % stride == 0)
{
i++;
}
trgData[n] = srcData[i];
}
After every width iterations (because stride == width) you increment the original index. That is, the whole first line of the new image will be filled with first byte of the original image, the second line - with the second byte etc.
Try this instead:
int targetIdx = 0;
for (int i = 0; i < height; ++i)
{
int iUnscaled = i / scale;
for (int j = 0; j < width; ++j) {
int jUnscaled = j / scale;
trgData[targetIdx++] = srcData[iUnscaled * origWidth + jUnscaled];
}
}
Note that it assumes BPP=1, that is it copies evey byte scale times horizontally and vertically. It's not hard to modify it for BPP more than 1.
Here is a demo illustrating both algorithms (comment the first line to see how your algo behaves)

Image Processing in C# - A smart solution?

I have an image with letters in it, the letters are in two colors black and blue, I want to read the blue colored letters from the image.
Can anyone suggest me a method to do this in C#. Iam studying GDI+,but still didn't get any logic to develop this program..
I tried OCRing it, but the issue with common OCRs is that they dont recognize the color difference.
I only want to read the Blue characters....
Any guidance is highly appreciated.

Try this one ;) But that's unsafe code.
void RedAndBlue()
{
OpenFileDialog ofd;
int imageHeight, imageWidth;
if (ofd.ShowDialog() == DialogResult.OK)
{
Image tmp = Image.FromFile(ofd.FileName);
imageHeight = tmp.Height;
imageWidth = tmp.Width;
}
else
{
// error
}
int[,] bluePixelArray = new int[imageWidth, imageHeight];
int[,] redPixelArray = new int[imageWidth, imageHeight];
Rectangle rect = new Rectangle(0, 0, tmp.Width, tmp.Height);
Bitmap temp = new Bitmap(tmp);
BitmapData bmpData = temp.LockBits(rect, ImageLockMode.ReadWrite, PixelFormat.Format24bppRgb);
int remain = bmpData.Stride - bmpData.Width * 3;
unsafe
{
byte* ptr = (byte*)bmpData.Scan0;
for (int j = 0; j < bmpData.Height; j++)
{
for (int i = 0; i < bmpData.Width; i++)
{
bluePixelArray[i, j] = ptr[0];
redPixelArray[i, j] = ptr[2];
ptr += 3;
}
ptr += remain;
}
}
temp.UnlockBits(bmpData);
temp.Dispose();
}

Modify the color of the image to gray scaled then use OCR
public Bitmap MakeGrayscale(Bitmap original)
{
//make an empty bitmap the same size as original
Bitmap newBitmap = new Bitmap(original.Width, original.Height);
for (int i = 0; i < original.Width; i++)
{
for (int j = 0; j < original.Height; j++)
{
//get the pixel from the original image
Color originalColor = original.GetPixel(i, j);
//create the grayscale version of the pixel
int grayScale = (int)((originalColor.R * .3) + (originalColor.G * .59)
+ (originalColor.B * .11));
//create the color object
Color newColor = Color.FromArgb(grayScale, grayScale, grayScale);
//set the new image's pixel to the grayscale version
newBitmap.SetPixel(i, j, newColor);
}
}
return newBitmap;
}

You could probably modify the palette to have only black and white on the image