We Keep Coding

WPF How to copy a portion of a canvas into an image and overwrite the image file

What I'm trying to do:
Load images from a number of .png files saved to disk (if the file doesn't exist, create a new image and fill it with a given colour)
Add these images to a Canvas (they are the same size as the canvas and are expected to mostly be off screen with a portion overlapping the actual Canvas area)
Draw onto the Canvas using lines, ellipses, etc
(On save) take the Canvas and convert it to a flat image held in memory (let's call it the CanvasImage)
For each image I loaded in step 1, calculate the portion that overlaps the actual Canvas area and copy that portion of the CanvasImage into the appropriate portion of the original image
Save the resulting images to disk, overwriting the existing files
I've had different portions of this working at different times, using code I found by searching for how to do each exact step, but never the full process. I'm mostly struggling with steps 4 to 6 as I don't really understand all the different image-related classes, how you convert between them, and which to use at each step in the process. Though I'm also having some issues with step 1, as I need to be able to overwrite the files at the end.
I've read a lot of the related questions (overwriting images, converting a canvas to an image, copying a portion of an image, etc) and tried the solutions (some of which worked in more simple examples), but I'm struggling to put it all together.
Any help or advice would be greatly appreciated. If there's anything you'd like me to elaborate on I'd be happy to, and if you'd like to see some of the code I can share it (I've just tried a lot of different things so I'm not sure how useful it would be)

I've managed to solve the problem. I'll post the code below for each step I had trouble with in case anyone else will find it useful. The code here is slightly modified to suit the general case.
Step 1: Loading an image from the disk that can be overwritten
public static System.Windows.Controls.Image LoadImage(string filePath)
{
var image = new System.Windows.Controls.Image();
image.Stretch = Stretch.Uniform;
var bitmapImage = new BitmapImage();
bitmapImage.BeginInit();
bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
bitmapImage.CreateOptions = BitmapCreateOptions.IgnoreImageCache;
bitmapImage.UriSource = new Uri(filePath, UriKind.Absolute);
bitmapImage.EndInit();
image.Width = bitmapImage.PixelWidth;
image.Height = bitmapImage.PixelHeight;
image.Source = bitmapImage;
return image;
}
Step 4: Convert canvas to a BitmapImage
public static BitmapImage Convert(Canvas canvas)
{
var sizeRender = new Size(canvas.ActualWidth, canvas.ActualHeight);
var dv = new DrawingVisual();
using (DrawingContext ctx = dv.RenderOpen())
{
VisualBrush vb = new VisualBrush(canvas);
ctx.DrawRectangle(vb, null, new Rect(new Point(), sizeRender));
}
var renderBitmap =
new RenderTargetBitmap(
(int)canvas.ActualWidth,
(int)canvas.ActualHeight,
96d,
96d,
PixelFormats.Pbgra32);
renderBitmap.Render(dv);
BitmapEncoder pngEncoder = new PngBitmapEncoder();
pngEncoder.Frames.Add(BitmapFrame.Create(renderBitmap));
BitmapImage bitmap;
using (var stream = new MemoryStream())
{
pngEncoder.Save(stream);
bitmap = new BitmapImage();
bitmap.BeginInit();
bitmap.StreamSource = stream;
bitmap.CacheOption = BitmapCacheOption.OnLoad;
bitmap.EndInit();
bitmap.Freeze();
}
return bitmap;
}
Step 5: Copy a portion of an image into a different image
public static void SaveImage(Image inputImage, BitmapImage canvasImage, string fileName)
{
... Calculate the portion that overlaps (left, top, width, height) ...
var canvasImageAsBitmap = BitmapConverter.ConvertBitmapImageToBitmap(canvasImage);
var croppingRectangle = new Rectangle(left, top, width, height);
var croppedRegion = canvasImageAsBitmap.Clone(croppingRectangle, canvasImageAsBitmap.PixelFormat);
var image = BitmapConverter.ConvertBitmapImageToBitmap((BitmapImage)inputImage.Source);
var bitmap = new Bitmap((int)inputImage.Width, (int)inputImage.Height);
... Calculate the position of the cropped image in the input image (xPos, yPos) ...
using (var graphics = Graphics.FromImage(bitmap))
{
graphics.DrawImage(image, 0, 0);
graphics.DrawImage(croppedRegion, xPos, yPos);
graphics.Flush();
}
bitmap.Save(fileName);
}
This step relies on the following code to work:
public static Bitmap ConvertBitmapImageToBitmap(BitmapImage bitmapImage)
{
using (MemoryStream memoryStream = new MemoryStream())
{
BitmapEncoder encoder = new BmpBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(bitmapImage));
encoder.Save(memoryStream);
Bitmap bitmap = new Bitmap(memoryStream);
return new Bitmap(bitmap);
}
}
Step 6: Overwrite the image file to save in the disk.
This is just the line bitmap.Save(fileName); shown in Step 5, which works due to the implementation of Step 1

WPF image to form picture picturebox [duplicate]

I'm tying together two libraries. One only gives output of type System.Windows.Media.Imaging.BitmapSource, the other only accepts input of type System.Drawing.Image.
How can this conversion be performed?

private System.Drawing.Bitmap BitmapFromSource(BitmapSource bitmapsource)
{
System.Drawing.Bitmap bitmap;
using (MemoryStream outStream = new MemoryStream())
{
BitmapEncoder enc = new BmpBitmapEncoder();
enc.Frames.Add(BitmapFrame.Create(bitmapsource));
enc.Save(outStream);
bitmap = new System.Drawing.Bitmap(outStream);
}
return bitmap;
}

This is an alternate technique that does the same thing. The accepted answer works, but I ran into problems with images that had alpha channels (even after switching to PngBitmapEncoder). This technique may also be faster since it just does a raw copy of pixels after converting to compatible pixel format.
public Bitmap BitmapFromSource(System.Windows.Media.Imaging.BitmapSource bitmapsource)
{
//convert image format
var src = new System.Windows.Media.Imaging.FormatConvertedBitmap();
src.BeginInit();
src.Source = bitmapsource;
src.DestinationFormat = System.Windows.Media.PixelFormats.Bgra32;
src.EndInit();
//copy to bitmap
Bitmap bitmap = new Bitmap(src.PixelWidth, src.PixelHeight, System.Drawing.Imaging.PixelFormat.Format32bppArgb);
var data = bitmap.LockBits(new Rectangle(Point.Empty, bitmap.Size), System.Drawing.Imaging.ImageLockMode.WriteOnly, System.Drawing.Imaging.PixelFormat.Format32bppArgb);
src.CopyPixels(System.Windows.Int32Rect.Empty, data.Scan0, data.Height * data.Stride, data.Stride);
bitmap.UnlockBits(data);
return bitmap;
}

Save depth frame as a PNG 16 file - Kinect SDK

I'm need to save depth frames as Gray PNG 16 images.
I only know how to save them as 32bgr images.
Here's my code:
private byte[] depthFrame32;
using (DepthImageFrame imageFrame = e.OpenDepthImageFrame())
{
if (imageFrame != null)
{
int stride = imageFrame.Width * 4;
BitmapSource bmp = BitmapSource.Create(imageFrame.Width, imageFrame.Height,
96, 96, PixelFormats.Bgr32, null, this.depthFrame32, stride);
using (var fileStream = new FileStream(full_path, FileMode.Create))
{
BitmapEncoder encoder = new PngBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(bmp));
encoder.Save(fileStream);
}
}
}
Thanks in advance

Not sure where your depthFrame32 array is filled with image data.
Anyway, you said you know how to save a depth frame as BGR32 bitmap. You could then always create a FormatConvertedBitmap from the original bitmap and save that:
...
var gray16Bitmap = new FormatConvertedBitmap(bmp, PixelFormats.Gray16, null, 0d);
var encoder = new PngBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(gray16Bitmap));
using (var fileStream = new FileStream(full_path, FileMode.Create))
{
encoder.Save(fileStream);
}
Assuming that you already have 16-bit grayscale data (e.g. from the converted outcome of DepthImageFrame.CopyPixelDataTo), you may of course also directly create a BitmapSource like this:
var stride = imageFrame.Width * 2;
var bmp = BitmapSource.Create(imageFrame.Width, imageFrame.Height,
96, 96, PixelFormats.Gray16, null, grayScaleData, stride);

Kinect Byte Stream Too Large

I'm trying to stream Kinect video data (just the image, not depth/infared) but I find the default buffer size on the image is very large (1228800) and incapable of sending over a network. I was wondering if there was any way of getting access to a smaller array without having to go down the route of codec compression. Here's is how I declare the Kinect which I took from a Microsoft sample;
// Turn on the color stream to receive color frames
this.sensor.ColorStream.Enable(ColorImageFormat.RgbResolution640x480Fps30);
// Allocate space to put the pixels we'll receive
this.colorPixels = new byte[this.sensor.ColorStream.FramePixelDataLength];
// This is the bitmap we'll display on-screen
this.colorBitmap = new WriteableBitmap(this.sensor.ColorStream.FrameWidth,
this.sensor.ColorStream.FrameHeight, 96.0, 96.0, PixelFormats.Bgr32, null);
// Set the image we display to point to the bitmap where we'll put the image data
this.kinectVideo.Source = this.colorBitmap;
// Add an event handler to be called whenever there is new color frame data
this.sensor.ColorFrameReady += this.SensorColorFrameReady;
// Start the sensor!
this.sensor.Start();
And here is the New Frame event which I then try to send each frame;
private void SensorColorFrameReady(object sender,
ColorImageFrameReadyEventArgs e)
{
using (ColorImageFrame colorFrame = e.OpenColorImageFrame())
{
if (colorFrame != null)
{
// Copy the pixel data from the image to a temporary array
colorFrame.CopyPixelDataTo(this.colorPixels);
// Write the pixel data into our bitmap
this.colorBitmap.WritePixels(
new Int32Rect(0, 0, this.colorBitmap.PixelWidth,
this.colorBitmap.PixelHeight),
this.colorPixels,
this.colorBitmap.PixelWidth * sizeof(int),
0);
if (NetworkStreamEnabled)
{
networkStream.Write(this.colorPixels, 0,
this.colorPixels.GetLength(0));
}
}
}
}
UPDATE
I'm using the following two methods to convert the ImageFrame to a Bitmap and then the Bitmap to a Byte[]. This has brought the buffer size down to ~730600. Still not enough but progress. (Source: Convert Kinect ColorImageFrame to Bitmap)
public static byte[] ImageToByte(Image img)
{
ImageConverter converter = new ImageConverter();
return (byte[])converter.ConvertTo(img, typeof(byte[]));
}
Bitmap ImageToBitmap(ColorImageFrame Image)
{
byte[] pixeldata = new byte[Image.PixelDataLength];
Image.CopyPixelDataTo(pixeldata);
Bitmap bmap = new Bitmap(Image.Width, Image.Height, System.Drawing.Imaging.PixelFormat.Format32bppRgb);
BitmapData bmapdata = bmap.LockBits(
new Rectangle(0, 0, Image.Width, Image.Height),
ImageLockMode.WriteOnly,
bmap.PixelFormat);
IntPtr ptr = bmapdata.Scan0;
Marshal.Copy(pixeldata, 0, ptr, Image.PixelDataLength);
bmap.UnlockBits(bmapdata);
return bmap;
}

My recommendation would be to store the colorframe in a bitmap, then send those files over the network and reassemble them in a video program. A project I've been doing with the Kinect does this:
//Save to file
if (skeletonFrame != null)
{
RenderTargetBitmap bmp = new RenderTargetBitmap(800, 600, 96, 96, PixelFormats.Pbgra32);
bmp.Render(window.image);
JpegBitmapEncoder encoder = new JpegBitmapEncoder();
// create frame from the writable bitmap and add to encoder
if (skeletonFrame.Timestamp - lastTime > 90)
{
encoder.Frames.Add(BitmapFrame.Create(bmp));
string myPhotos = Environment.GetFolderPath(Environment.SpecialFolder.MyPictures);
string path = "C:your\\directory\\here" + skeletonFrame.Timestamp + ".jpg";
using (FileStream fs = new FileStream(path, FileMode.Create))
{
encoder.Save(fs);
}
lastTime = skeletonFrame.Timestamp;
}
}
Of course, if you need this to be in real time, you're not going to like this solution, and I think my "comment" button is gone after the bounty.

Converting from Bitmap to JPEG and retaining original Bitmap resolution

I am using the below code to transform a bitmap to jpeg. The bitmap is being passed through at 300 dpi (horizontal/vertical resolution) but the CreateBitmapSourcefromHBitmap method always changes the subsequent jpeg to be saved at 96dpi.
Is there any way to set the source to retain the original 300dpi? The dpiX and dpiY values are read only.
Thanks in advance.
public static MemoryStream GetJpgMemoryStream(Bitmap bitMap, int jpgQuality)
{
IntPtr hBitmap = bitMap.GetHbitmap();
try
{
BitmapSource source = System.Windows.Interop.Imaging.CreateBitmapSourceFromHBitmap(hBitmap, IntPtr.Zero, Int32Rect.Empty, BitmapSizeOptions.FromEmptyOptions());
var jpegBitmapEncoder = new JpegBitmapEncoder();
jpegBitmapEncoder.QualityLevel = jpgQuality;
jpegBitmapEncoder.Frames.Add(BitmapFrame.Create(source));
var jpegStream = new MemoryStream();
jpegBitmapEncoder.Save(jpegStream);
jpegStream.Flush();
return jpegStream;
}
}

The MSDN Forum has a discussion that's similar to your problem. The recommended answer is to not use the Interop, instead use a WriteableBitmap as the BitmapSource for the JPEG.

You have to change the method used for generating the BitmapSource. You can use the method stated in fast converting Bitmap to BitmapSource wpf for generating BitmapSource. Here is the updated code.
BitmapData data = bitMap.LockBits(
new System.Drawing.Rectangle(0,0,bitMap.Width,bitMap.Height),
System.Drawing.Imaging.ImageLockMode.ReadOnly,
bitMap.PixelFormat);
BitmapSource source = BitmapSource.Create(bitMap.Width, bitMap.Height,
bitMap.HorizontalResolution, bitMap.VerticalResolution,
System.Windows.Media.PixelFormats.Bgr24, null,
data.Scan0, data.Stride*bitMap.Height, data.Stride);
bitMap.UnlockBits(data);
var jpegBitmapEncoder = new JpegBitmapEncoder();
jpegBitmapEncoder.QualityLevel = jpgQuality;
jpegBitmapEncoder.Frames.Add(BitmapFrame.Create(source));
var jpegStream = new MemoryStream();
jpegBitmapEncoder.Save(jpegStream);