I need to export a Canvas to multiple PNG files. Trying to export the whole canvas to an image and then crop the image failed due to the size of the resulting image (something like 20.000px x 5.000px).
Now the strategy is to split the main canvas into smaller parts and then export each individual part to an image. The resulting image though, doesn't show the image from the main canvas below it.
Any ideas? Here is the code used to test the splitting of the Canvas (the real one is much larger than 1024x1024):
public void TestPrintPartOfCanvas()
{
//the main canvas
var main = new Canvas();
main.Width = 1024;
main.Height = 1024;
main.Background = Brushes.Blue;
//place something inside the canvas
var redRect = new System.Windows.Shapes.Rectangle();
redRect.Fill = Brushes.OrangeRed;
redRect.Width = 128;
redRect.Height = 128;
main.Children.Add(redRect);
// reset current transform (in case it is scaled or rotated)
var transform = main.LayoutTransform;
main.LayoutTransform = null;
// Get the size of canvas
var size = new Size(main.Width, main.Height);
//representing the first part of the main canvas
var part = new Canvas();
part.Width = 256;
part.Height = 256;
part.Background = Brushes.Transparent;
main.Children.Add(part);
// Measure and arrange the surface
main.Measure(size);
main.Arrange(new Rect(size));
// Create a render bitmap and push the part to it
var renderBitmap = new RenderTargetBitmap((int)part.Width, (int)part.Height, 96d, 96d, PixelFormats.Pbgra32);
renderBitmap.Render(part);
// Create a file stream for saving image
using (var outStream = new FileStream("p:/part.png", FileMode.Create))
{
// Use png encoder for our data
var encoder = new PngBitmapEncoder();
// push the rendered bitmap to it
encoder.Frames.Add(BitmapFrame.Create(renderBitmap));
// save the data to the stream
encoder.Save(outStream);
}
// Restore previously saved layout
main.LayoutTransform = transform;
}
You may easily crop a part of the Canvas by adjusting the Arrange rectangle:
var size = new Size(main.Width, main.Height);
main.Measure(size);
var cropOffset = new Point(-256, -256);
main.Arrange(new Rect(cropOffset, size));
var renderBitmap = new RenderTargetBitmap(256, 256, 96d, 96d, PixelFormats.Pbgra32);
renderBitmap.Render(main);
The above crops a 256x256 rectangle at position 256,256.
Related
I have Grid with three columns and layout is like
radio button | Canvas Control | radio button
For some feature of my application I need to take a screenshot of current view of canvas feature and save into a file.
I am using following method to save canvas to bmp,where I measure and arrange canvas.My problem is after image is saved ,canvas position in original grid is shifted to left,how can I re position my canvas back in grid as it was earlier.
private void SaveCanvasContentToImage(string path, Canvas canvasControl)
{
if (path == null && canvasControl != null) return;
// Save current canvas transform
Transform transform = canvasControl.LayoutTransform;
// reset current transform (in case it is scaled or rotated)
canvasControl.LayoutTransform = null;
// Get the size of canvas
Size size = new Size(canvasControl.Width, canvasControl.Height);
// Measure and arrange the canvas
canvasControl.Measure(size);
canvasControl.Arrange(new Rect(size));
// Create a render bitmap and push the canvas to it
RenderTargetBitmap renderBitmap =
new RenderTargetBitmap(
(int)size.Width,
(int)size.Height,
96d,
96d,
PixelFormats.Pbgra32);
renderBitmap.Render(canvasControl);
// Create a file stream for saving image
using (FileStream outStream = new FileStream(path, FileMode.CreateNew,FileAccess.ReadWrite))
{
// Use bitmap encoder for our data
BitmapEncoder encoder = new BmpBitmapEncoder();
// push the rendered bitmap to it
encoder.Frames.Add(BitmapFrame.Create(renderBitmap));
// save the data to the stream
encoder.Save(outStream);
outStream.Close();
outStream.Dispose();
}
// Restore previously saved layout
canvasControl.LayoutTransform = transform;
}
You may avoid the layout problem by using an intermediate DrawingVisual:
var renderTargetBitmap = new RenderTargetBitmap(
(int)canvasControl.ActualWidth, (int)canvasControl.ActualHeight,
96, 96, PixelFormats.Default);
var visual = new DrawingVisual();
using (var dc = visual.RenderOpen())
{
dc.DrawRectangle(
new VisualBrush(canvasControl),
null,
new Rect(0, 0, canvasControl.ActualWidth, canvasControl.ActualHeight));
}
renderTargetBitmap.Render(visual);
I have a bug in my image editor with the blur tool.
When I select the rectangle to set the blur effect, and when I apply, result is a bit different see:
To create the "Before" I do:
var blurredImage = ExtractImageToBlur(); // extract the selected area from image
BlurredImageRectangle.Fill = new ImageBrush(blurredImage);
var effect = new BlurEffect();
effect.KernelType = KernelType.Gaussian;
effect.RenderingBias = RenderingBias.Quality;
effect.Radius = m_blurValue;
BlurredImageRectangle.Effect = effect;
To create the "After", I do:
var blurredImage = ExtractImageToBlur(); // extract the selected area from image
Rectangle rectangleToRender = new Rectangle();
rectangleToRender.Fill = new ImageBrush(blurredImage);
var effect = new BlurEffect();
effect.KernelType = KernelType.Gaussian;
effect.RenderingBias = RenderingBias.Quality;
effect.Radius = m_blurValue;
rectangleToRender.Effect = effect;
Size size = new Size(croppedImg.PixelWidth, croppedImg.PixelHeight);
rectangleToRender.Measure(size);
rectangleToRender.Arrange(new Rect(size));
var render = new RenderTargetBitmap(croppedImg.PixelWidth, croppedImg.PixelHeight, 96, 96, PixelFormats.Pbgra32);
render.Render(rectangleToRender);
// Merge the source with the blurred section
DrawingVisual drawingVisual = new DrawingVisual();
using (DrawingContext context = drawingVisual.RenderOpen())
{
int left = (int)(Canvas.GetLeft(BlurredImageRectangle) * WidthRatio);
int top = (int)(Canvas.GetTop(BlurredImageRectangle) * HeightRatio);
context.DrawImage(Source, new Rect(0, 0, Source.PixelWidth, Source.PixelHeight));
context.DrawImage(render, new Rect(left, top, croppedImg.PixelWidth, croppedImg.PixelHeight));
}
var bitmap = new RenderTargetBitmap(Source.PixelWidth, Source.PixelHeight, 96, 96, PixelFormats.Pbgra32);
bitmap.Render(drawingVisual);
And when I play with the blur radius, its sometimes a lot more different from both images.
Why its not the same?
Found the problem.
When I was drawing the rectangle on the screen, I applied the blur effect on the pixels on the screen.
When I hit save, the blur effect is applied on the pixel on the image on disk.
Huge difference.
When I take a screenshot of a current WPF window, the image resolution is that of my monitor (if the app is maximized), which is ok. However, if I was to print that image to a much bigger format, the image would look blurry. I found the way to capture the current window, and save it as a png file, but it's not doing the trick. The image is saved with the resolution I set, but the actual wpf window takes only a small portion of the saved image. Example is taken from:
http://blogs.msdn.com/b/saveenr/archive/2008/09/18/wpf-xaml-saving-a-window-or-canvas-as-a-png-bitmap.aspx
var screen = System.Windows.Application.Current.Windows.OfType<Window>().SingleOrDefault(x => x.IsActive);
var rtb = new RenderTargetBitmap(4000, 4000, 96, 96, PixelFormats.Pbgra32);
rtb.Render(screen);
var enc = new System.Windows.Media.Imaging.PngBitmapEncoder();
enc.Frames.Add(System.Windows.Media.Imaging.BitmapFrame.Create(rtb));
using (var stm = System.IO.File.Create("ScreenShot.png"))
{
enc.Save(stm);
using (Image img = Image.FromStream(stm))
{
Rectangle dest = new Rectangle(0, 0, 6000, 4000);
using (Graphics imgG = Graphics.FromImage(img))
{
imgG.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
imgG.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
imgG.DrawImage(img, dest);
}
img.Save("NewScreenShot.png");
}
}
So basically, I'd like to capture the screenshot with the resolution of 4000 x 4000, if that's possible, without losing quality.
The above code produces an image of 4000 x 4000, however the screenshot only takes a small portion of it, its original resolution.
To scale your image, you can use a DrawingVisual and a ScaleTransform :
var w = 4000;
var h = 4000;
var screen = System.Windows.Application.Current.Windows.OfType<Window>().SingleOrDefault(x => x.IsActive);
var visual = new DrawingVisual();
using (var context = visual.RenderOpen())
{
context.DrawRectangle(new VisualBrush(screen),
null,
new Rect(new Point(), new Size(screen.Width, screen.Height)));
}
visual.Transform = new ScaleTransform(w / screen.ActualWidth, h / screen.ActualHeight);
var rtb = new RenderTargetBitmap(w, h, 96, 96, PixelFormats.Pbgra32);
rtb.Render(visual);
var enc = new PngBitmapEncoder();
enc.Frames.Add(BitmapFrame.Create(rtb));
using (var stm = File.Create("ScreenShot.png"))
{
enc.Save(stm);
}
I have to put dynamically generated image
var img = new Bitmap(..);
// draw something on img canvas ...
To the ToggleButton background. When I assign generated image to ToggleButton.Content property I see "System.Drawing.Bitmap" string, not the image itself. It looks like ToString() method is used for Content property. How can I show generated image instead?
If WPF does not have an appropriate converter it just calls the ToString() method, the Bitmap format is unsuitable, what you normally want to use is an Image with a source that is a BitmapImage, there are several ways to do conversions between the different formats.
Here is one method that does a conversion from Bitmap to BitmapImage:
public static BitmapImage BitmapToBitmapImage(System.Drawing.Bitmap bitmap)
{
MemoryStream ms = new MemoryStream();
bitmap.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
BitmapImage bImg = new System.Windows.Media.Imaging.BitmapImage();
bImg.BeginInit();
bImg.StreamSource = new MemoryStream(ms.ToArray());
bImg.CreateOptions = BitmapCreateOptions.None;
bImg.CacheOption = BitmapCacheOption.Default;
bImg.EndInit();
ms.Close();
return bImg;
}
Note that ImageFormat.Png is slower than uncompressed formats but it retains the transparency if there is any.
Now you should be able to use this as the Source of an Image control and this Image control as the content of the button.
"Content" property is concerned with what you write on the surface of the ToggleButton. You need to initialize the "Background" property of the UI element. Here is one example:
PixelFormat pf = PixelFormats.Bgr32;
int width = 200;
int height = 200;
int rawStride = (width * pf.BitsPerPixel + 7) / 8;
byte[] rawImage = new byte[rawStride * height];
// Initialize the image with data.
Random value = new Random();
value.NextBytes(rawImage);
// Create a BitmapSource.
BitmapSource bitmap = BitmapSource.Create(width, height, 96, 96, pf, null, rawImage, rawStride);
ImageBrush imgBrush = new ImageBrush(bitmap);
myToggleButton.Background = imgBrush;
I created the image using the following article http://msdn.microsoft.com/en-us/library/system.windows.media.imaging.bitmapsource(VS.85).aspx
I am attempting to print a JPEG file that I reference using a Uri object and am having some difficulties. I found that while the image was printing, it was cropped slightly and was flipped and mirrored. I'm guessing that the crop was caused by a size not being set properly but have no idea why it's being flipped and rotated. Assuming that this was a natural oddity, I attempted to resolve the issue by applying a transform to the drawingContext object but this results a blank page being printed. Here is my code:
public void Print(List<Uri> ListToBePrinted)
{
XpsDocumentWriter writer =
PrintQueue.CreateXpsDocumentWriter(this.SelectedPrinter.PrintQueue);
PrintCapabilities printerCapabilities =
this.SelectedPrinter.PrintQueue.GetPrintCapabilities();
Size PageSize =
new Size(printerCapabilities.PageImageableArea.ExtentWidth,
printerCapabilities.PageImageableArea.ExtentHeight);
foreach (Uri aUri in ListToBePrinted)
{
BitmapImage anImage = new BitmapImage(aUri);
//create new visual which would be initialized by image
DrawingVisual drawingVisual = new DrawingVisual();
//create a drawing context so that image can be rendered to print
DrawingContext drawingContext = drawingVisual.RenderOpen();
// Flips along X and Y axis (flips and mirrors)
drawingContext.PushTransform(new ScaleTransform(-1, -1));
drawingContext.DrawImage(anImage, new Rect(PageSize));
drawingContext.Close();
writer.Write(drawingVisual);
}
}
Any help would be greatly appreciated - thank you!
Here's what I ended up with:
public void Print(List<Uri> ListToBePrinted)
{
XpsDocumentWriter writer =
PrintQueue.CreateXpsDocumentWriter(this.SelectedPrinter.PrintQueue);
PrintCapabilities printerCapabilities =
this.SelectedPrinter.PrintQueue.GetPrintCapabilities();
Size PrintableImageSize =
new Size(printerCapabilities.PageImageableArea.ExtentWidth,
printerCapabilities.PageImageableArea.ExtentHeight);
foreach (Uri aUri in ListToBePrinted)
{
DrawingVisual drawVisual = new DrawingVisual();
ImageBrush imageBrush = new ImageBrush();
imageBrush.ImageSource = new BitmapImage(aUri);
imageBrush.Stretch = Stretch.Fill;
imageBrush.TileMode = TileMode.None;
imageBrush.AlignmentX = AlignmentX.Center;
imageBrush.AlignmentY = AlignmentY.Center;
using (DrawingContext drawingContext = drawVisual.RenderOpen())
{
// Flips along X and Y axis (flips and mirrors)
drawingContext.PushTransform(new ScaleTransform(-1, 1, PrintableImageSize.Width / 2, PrintableImageSize.Height / 2));
drawingContext.PushTransform(new RotateTransform(180, PrintableImageSize.Width / 2, PrintableImageSize.Height / 2)); // Rotates 180 degree
drawingContext.DrawRectangle(imageBrush, null, new Rect(25, -25, PrintableImageSize.Width, PrintableImageSize.Height));
}
writer.Write(drawVisual);
}
}
The image is a little fuzzy but is certainly acceptable. I'm still not sure why my image needed to be flipped or mirrored.
Could you do something like:
BitmapImage anImage = new BitmapImage(aUri);
Image image = new Image();
image.BeginInit();
image.Source = anImage;
image.EndInit();
image.Measure(PageSize);
image.InvalidateVisual();
Then just print the Image object since it derives from Visual...
You need to call InvalidateVisual so that OnRender will be called, if you didn't it would result in a blank image...