I have two layers. The first layer is Image control. The source of it is Bitmap Image. And this is the background layer. The second one, which is the front layer is a canvas on which I can draw geometry objects (such as line, polyline, rectangle etc.) and the background of canvas is transparent.
How can I merge these two layers and save it as an image using WPF.
What do you mean by "Layers"? Just two controls sat in the same cell of a grid? If you have both "layers" sat in another container (such as a grid, or even the window) then you can use RenderTargetBitmap with that container to get your image. I have some details, an extension method for taking WPF "Screenshots" on my blog.
You can get bitmap of your parent panel on which you have placed your image control and canvas.
How is the code to get the bitmap of UIElement in WPF.
RenderTargetBitmap bmp = new RenderTargetBitmap(Width, Height, 96, 96, PixelFormats.Pbgra32);
bmp.Render(parentPanel);
Use something like, call this method from your canvas (this is canvas) -
private Bitmap ImageGenerator()
{
var transform = this.LayoutTransform;
// Call UpdateLayout to make sure changes all changes
// while drawing objects on canvas are reflected
var layer = AdornerLayer.GetAdornerLayer(this);
layer?.UpdateLayout();
// Get the size of canvas
var size = new System.Windows.Size(this.ActualWidth, this.ActualHeight);
// Measure and arrange the surface
// VERY IMPORTANT
this.Measure(size);
this.Arrange(new Rect(RenderSize));
RenderTargetBitmap renderBitmap =
new RenderTargetBitmap(
(int)this.ActualWidth,
(int)this.ActualHeight,
96d,
96d,
PixelFormats.Pbgra32);
renderBitmap.Render(this);
JpegBitmapEncoder encoder = new JpegBitmapEncoder();
// push the rendered bitmap to it
encoder.Frames.Add(BitmapFrame.Create(renderBitmap));
var stream = new MemoryStream();
encoder.Save(stream);
this.LayoutTransform = transform;
return new Bitmap(stream);
}
Related
I am having two control image view and canvas.
Over image i am drawing rectangle.While taking screenshot i am only getting image not the rectangle.
Using below code i am getting black image
int Width = (int)canvas1.RenderSize.Width;
int Height = (int)canvas1.RenderSize.Height;
RenderTargetBitmap renderTargetBitmap =
new RenderTargetBitmap(Width, Height, 96, 96, PixelFormats.Pbgra32);
renderTargetBitmap.Render(canvas1);
PngBitmapEncoder pngImage = new PngBitmapEncoder();
pngImage.Frames.Add(BitmapFrame.Create(renderTargetBitmap));
using (Stream fileStream = File.Create(filePath))
{
pngImage.Save(fileStream);
}
if i am replacing canvas with image only image is coming.
How to take screenshot containing both the controls ?
have a no-op after the render call for the render to be completed before taking the screenshot.
Also am assuming you are able to view the drawn rectangle in the viewport
and it is only not appearing in the screenshot. If not make sure the color of the rectangle is distinct against the image background.
renderTargetBitmap.Render(canvas1);
//no-op for rendering to complete before taking screenshot.
_dispatcher.BeginInvoke(DispatcherPriority.Background, new Action(() => { }));
//screenshot code here.
I am trying to draw some string to bitmap at certain position and copy a barcode bitmap to the new bitmap.I have not done with graphics before so i don't know where to start.
Can anyone guide me on this?my output of the bitmap is a receipt like.
Here is a solution. Please make a grid or canvas and put the barcode image and use a label with desired text and put the label on desired location relative to barcode grid. So, trick is you can immediately take screenshot of this grid using following code.Then, you are done.
public void ConvertToBitmapSource(UIElement element)
{
var target = new RenderTargetBitmap(
(int)element.RenderSize.Width, (int)element.RenderSize.Height,
96, 96, PixelFormats.Pbgra32);
target.Render(element);
var encoder = new PngBitmapEncoder();
var outputFrame = BitmapFrame.Create(target);
encoder.Frames.Add(outputFrame);
using (var file = File.OpenWrite("TestImage.png"))
{
encoder.Save(file);
}
}
I have two images,now i want to overlay the images,such that the other image appears on center or left corner of the other image,and then when finally both the images are overlayed i can store it in another new image object,and i want to all this in code behind only not xaml,how to do this?
if (((Grid)sender).Children.Count > 0)
{
gridBackground = (ImageBrush)(((Grid)sender).Background);
gridBackImage = new System.Windows.Controls.Image();
gridBackImage.Source = gridBackground.ImageSource;
}
System.Windows.Controls.Image imgRejectIcon;
if (((Grid)sender).Children.Count > 0)
{
imgRejectIcon = (System.Windows.Controls.Image)(((Grid)sender).Children[0]);
}
Now i want to merge gridBackImage and imgRejection and store it in new image object
You can arrange your two Images in any way that you want and I'll leave that code for you to do (it'd much simpler to do in XAML). In WPF, all UI controls extend the Visual class. This is very useful for making BitmapImages from UI controls, when used with the RenderTargetBitmap.Render method.
First, arrange your two Image controls into a Grid, or other container control, and then you can pass the container control to the RenderTargetBitmap.Render method and create an Image something like this:
RenderTargetBitmap renderTargetBitmap =
new RenderTargetBitmap(width, height, 96, 96, PixelFormats.Pbgra32);
renderTargetBitmap.Render(yourContainerControl);
PngBitmapEncoder pngImage = new PngBitmapEncoder();
pngImage.Frames.Add(BitmapFrame.Create(renderTargetBitmap));
using (Stream fileStream = File.Create(filePath))
{
pngImage.Save(fileStream);
}
I currently have one writeablebitmap image and canvas with drawings and I want to send the images to the peer.In order to reduce the bandwidth, I would like to convert canvas to the writeablebitmap, thus I can blit both the images to a new writeablebitmap. The problem is I cannot find a good way to convert the canvas.
Therefore, I would like to ask if there is a direct way to convert the canvas to a writeablebitmap class.
This is taken from this blog post but instead of writing to a file, it writes to a WriteableBitmap.
public WriteableBitmap SaveAsWriteableBitmap(Canvas surface)
{
if (surface == null) return null;
// Save current canvas transform
Transform transform = surface.LayoutTransform;
// reset current transform (in case it is scaled or rotated)
surface.LayoutTransform = null;
// Get the size of canvas
Size size = new Size(surface.ActualWidth, surface.ActualHeight);
// Measure and arrange the surface
// VERY IMPORTANT
surface.Measure(size);
surface.Arrange(new Rect(size));
// Create a render bitmap and push the surface to it
RenderTargetBitmap renderBitmap = new RenderTargetBitmap(
(int)size.Width,
(int)size.Height,
96d,
96d,
PixelFormats.Pbgra32);
renderBitmap.Render(surface);
//Restore previously saved layout
surface.LayoutTransform = transform;
//create and return a new WriteableBitmap using the RenderTargetBitmap
return new WriteableBitmap(renderBitmap);
}
I am using WPF to generate tile images for my WinRT app. I have a tile UserControl which is converted to PNG and this works well (It does, please don't tell me otherwise). WinRT passes me a scale property 100% (320x150), 140% (434x210) and 180% (558x270) which I use to generate the correct size of image.
For when I want to use images in my tile. I have replicated the image selection functionality of WinRT (You can supply thee scales of images and WinRT apps automatically select the correct scale) in my tile UserControl's code behind. So depending on the scale I select a bigger or smaller image source. However, on the larger scales my font size remains the same size and looks really small. I don't think I need to change the font size based on the scale as this is not what happens in WinRT, so it must be the code I'm using to convert my UserControl to a PNG and something to do with DPI. Here is my conversion Code:
// I pass in 320x150 or 434x210 or 558x270 depending on the scale.
public static MemoryStream ToPng(
this FrameworkElement frameworkElement,
double width,
double height)
{
BitmapSource bitmapSource = ToBitmapSource(frameworkElement, width, height);
PngBitmapEncoder pngBitmapEncoder = new PngBitmapEncoder();
pngBitmapEncoder.Frames.Add(BitmapFrame.Create(bitmapSource));
MemoryStream memoryStream = new MemoryStream();
pngBitmapEncoder.Save(memoryStream);
memoryStream.Position = 0;
return memoryStream;
}
public static BitmapSource ToBitmapSource(
this FrameworkElement frameworkElement,
double width,
double height)
{
Size renderingSize = new Size(width, height);
frameworkElement.Measure(renderingSize);
Rect renderingRectangle = new Rect(new Point(0, 0), renderingSize);
frameworkElement.Arrange(renderingRectangle);
frameworkElement.UpdateLayout();
Rect bounds = VisualTreeHelper.GetDescendantBounds(frameworkElement);
RenderTargetBitmap renderBitmap = new RenderTargetBitmap(
(int)frameworkElement.ActualWidth,
(int)frameworkElement.ActualHeight,
96,
96,
PixelFormats.Pbgra32);
DrawingVisual drawingVisual = new DrawingVisual();
using (DrawingContext drawingContext = drawingVisual.RenderOpen())
{
VisualBrush visualBrush = new VisualBrush(frameworkElement);
drawingContext.DrawRectangle(visualBrush, null, new Rect(new Point(), bounds.Size));
}
renderBitmap.Render(drawingVisual);
return renderBitmap;
}
Thanks for any help. Much appreciated.
I needed to change the above code so that I measure and arrange the frameworkElement as 310x150. I then render it to the final scale size e.g. 558x270 and set the DPI to (96/100)*scale where the scale is 180 in this case.