Guardar WPF InkCanvas en un JPG: la imagen se está recortando
Pregunta
Tengo un control WPF InkCanvas que estoy usando para capturar una firma en mi aplicación. El control se ve así: es 700x300
Sin embargo, cuando lo guardo como JPG, la imagen resultante se ve así, también 700x300
El código que estoy usando para guardar
sigPath = System.IO.Path.GetTempFileName();
MemoryStream ms = new MemoryStream();
FileStream fs = new FileStream(sigPath, FileMode.Create);
RenderTargetBitmap rtb = new RenderTargetBitmap((int)inkSig.Width, (int)inkSig.Height, 96d, 96d, PixelFormats.Default);
rtb.Render(inkSig);
JpegBitmapEncoder encoder = new JpegBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(rtb));
encoder.Save(fs);
fs.Close();
Este es el XAML que estoy usando:
<Window x:Class="Consent.Client.SigPanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="Transparent" Topmost="True" AllowsTransparency="True"
Title="SigPanel" Left="0" Top="0" Height="1024" Width="768" WindowStyle ="None" ShowInTaskbar="False" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" >
<Border BorderThickness="1" BorderBrush="Black" Background='#FFFFFFFF' x:Name='DocumentRoot' Width='750' Height='400' CornerRadius='10'>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Name="txtLabel" FontSize="24" HorizontalAlignment="Center" >Label</TextBlock>
<InkCanvas Opacity="1" Background="Beige" Name="inkSig" Width="700" Height="300" />
<StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
<Button FontSize="24" Margin="10" Width="150" Name="btnSave" Click="btnSave_Click">Save</Button>
<Button FontSize="24" Margin="10" Width="150" Name="btnCancel" Click="btnCancel_Click">Cancel</Button>
<Button FontSize="24" Margin="10" Width="150" Name="btnClear" Click="btnClear_Click">Clear</Button>
</StackPanel>
</StackPanel>
</Border>
En el pasado esto funcionó perfectamente. No puedo entender qué cambio está causando que la imagen cambie cuando se guarda.
Solución
¡Ajá! El problema es el TextBlock txtLabel que está directamente encima de InkCanvas. Cuando eliminas eso, la línea negra desaparece.
En cuanto a por qué sucede eso, todavía no estoy completamente seguro.
Otros consejos
Tuve el mismo problema que hice de esta manera ... Funcionó aquí ...
private void Button_Click(object sender, RoutedEventArgs e)
{
double width = inkSig.ActualWidth;
double height = inkSig.ActualHeight;
RenderTargetBitmap bmpCopied = new RenderTargetBitmap((int)Math.Round(width), (int)Math.Round(height), 96, 96, PixelFormats.Default);
DrawingVisual dv = new DrawingVisual();
using (DrawingContext dc = dv.RenderOpen())
{
VisualBrush vb = new VisualBrush(inkSig);
dc.DrawRectangle(vb, null, new Rect(new System.Windows.Point(), new System.Windows.Size(width, height)));
}
bmpCopied.Render(dv);
System.Drawing.Bitmap bitmap;
using (MemoryStream outStream = new MemoryStream())
{
// from System.Media.BitmapImage to System.Drawing.Bitmap
BitmapEncoder enc = new BmpBitmapEncoder();
enc.Frames.Add(BitmapFrame.Create(bmpCopied));
enc.Save(outStream);
bitmap = new System.Drawing.Bitmap(outStream);
}
EncoderParameter qualityParam =
new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 85L);
// Jpeg image codec
ImageCodecInfo jpegCodec = getEncoderInfo("image/jpeg");
if (jpegCodec == null)
return;
EncoderParameters encoderParams = new EncoderParameters(1);
encoderParams.Param[0] = qualityParam;
Bitmap btm = new Bitmap(bitmap);
bitmap.Dispose();
btm.Save("C:\\Users\\Pd\\Desktop\\dfe12.jpg", jpegCodec, encoderParams);
btm.Dispose();
}
private ImageCodecInfo getEncoderInfo(string mimeType)
{
// Get image codecs for all image formats
ImageCodecInfo[] codecs = ImageCodecInfo.GetImageEncoders();
// Find the correct image codec
for (int i = 0; i < codecs.Length; i++)
if (codecs[i].MimeType == mimeType)
return codecs[i];
return null;
}
Mi imagen de guardar clase
using System;
using System.IO;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;
public void ExportToJpeg(String path, InkCanvas surface)
{
double
x1 = surface.Margin.Left,
x2 = surface.Margin.Top,
x3 = surface.Margin.Right,
x4 = surface.Margin.Bottom;
if (path == null) return;
surface.Margin = new Thickness(0, 0, 0, 0);
Size size = new Size(surface.Width, surface.Height);
surface.Measure(size);
surface.Arrange(new Rect(size));
RenderTargetBitmap renderBitmap =
new RenderTargetBitmap(
(int)size.Width,
(int)size.Height,
96,
96,
PixelFormats.Default);
renderBitmap.Render(surface);
using (FileStream fs = File.Open(path, FileMode.Create))
{
JpegBitmapEncoder encoder = new JpegBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(renderBitmap));
encoder.Save(fs);
}
surface.Margin = new Thickness(x1, x2, x3, x4);
}
y surface.Margin = new Thickness (55,40,96,5); http://img519.imageshack.us/img519/7499/mynewimage.png
Jason, resolví este problema.
Perdon por mi inglés. Soy ruso.
Necesita establecer la propiedad inkCanvas.Margin
en 0,0,0,0
con:
surface.Margin = new Thickness(0, 0, 0, 0);
después de guardar el margen establecido en su posición.
ejemplo: http://img189.imageshack.us/img189/7499/mynewimage.png
var size = new Size(inkCanvas.ActualWidth, inkCanvas.ActualHeight);
inkCanvas.Margin = new Thickness(0, 0, 0, 0);
inkCanvas.Measure(size);
inkCanvas.Arrange(new Rect(size));
var encoder = new PngBitmapEncoder();
var bitmapTarget = new RenderTargetBitmap((int)size.Width, (int)size.Height, 96, 96, PixelFormats.Default);
bitmapTarget.Render(inkCanvas);
encoder.Frames.Add(BitmapFrame.Create(bitmapTarget));
encoder.Save(ms);
He estado buscando en toda la red una respuesta a este problema y probé la mayoría de las opiniones sin ninguna alegría. ¡Entonces probé esto y funcionó!
<Canvas x:Name="editCanvas" Background="Transparent" ClipToBounds="True">
<InkCanvas EditingMode="Select" x:Name="inkCanvas" Background="Transparent" Height="562" Width="866">
</InkCanvas>
</Canvas>