Draw strokes from SurfaceInkCanvas onto image - wpf

Question

I'm trying to create an app that allows the user to draw on an image. I started with the PhotoPaint SDK sample. I understand that the SurfaceInkCanvas is set to transparent and is located on top of the image. When the user is finished drawing I would like to draw the strokes onto the image itself. This is where I'm stuck. Can anyone please point me in the right direction?
Thanks!

Answer 1

Download WriteableBitmap extenstion library from: http://writeablebitmapex.codeplex.com/
Usage:
using System;
using System.IO;
using System.Net;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Imaging;
namespace TestApp
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void SaveImage(object sender, RoutedEventArgs e)
{
var bi = FromUrl("http://www.dynamicdrive.com/dynamicindex4/lightbox2/horses.jpg", Environment.CurrentDirectory);
if (bi.Format != PixelFormats.Pbgra32)
bi = BitmapFactory.ConvertToPbgra32Format(bi);
WriteableBitmap wrb = new WriteableBitmap(bi);
foreach (var stroke in ink.Strokes)
{
foreach (var point in stroke.StylusPoints)
{
wrb.DrawLine((int)point.X, (int)point.Y, (int)(point.X + 1), (int)(point.Y + 1), Colors.Red);
}
}
var encoder = new JpegBitmapEncoder();
BitmapFrame frame = BitmapFrame.Create(wrb);
encoder.Frames.Add(frame);
using (var stream = File.Create("result.jpg"))
{
encoder.Save(stream);
}
}
public static BitmapSource FromUrl(string url, string workingPath)
{
string[] strArr = url.Split(new char[] { '/' });
string file = workingPath + "\\" + strArr[strArr.Length - 1];
if (!File.Exists(file))
{
using (WebClient client = new WebClient())
{
client.DownloadFile(url, file);
}
}
return BitmapImageFromFile(file);
}
public static BitmapSource BitmapImageFromFile(string file)
{
BitmapImage bi = new BitmapImage();
try
{
bi.BeginInit();
bi.CacheOption = BitmapCacheOption.OnLoad;
bi.CreateOptions = BitmapCreateOptions.IgnoreImageCache;
bi.UriSource = new Uri(file, UriKind.RelativeOrAbsolute);
bi.EndInit();
}
catch { return ToBitmapSource(System.Drawing.Bitmap.FromFile(file)); }
return bi;
}
public static BitmapSource ToBitmapSource(System.Drawing.Image bitmap)
{
using (MemoryStream stream = new MemoryStream())
{
bitmap.Save(stream, System.Drawing.Imaging.ImageFormat.Jpeg);
stream.Position = 0;
BitmapImage result = new BitmapImage();
result.BeginInit();
result.CacheOption = BitmapCacheOption.OnLoad;
result.StreamSource = stream;
result.EndInit();
result.Freeze();
return result;
}
}
}
}
XAML:
<Window x:Class="TestApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Height="350" Width="525">
<Grid>
<Image Source="http://www.dynamicdrive.com/dynamicindex4/lightbox2/horses.jpg"
Name="img"/>
<InkCanvas Background="Transparent"
Name="ink"/>
<Button Content="Save"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="5"
Click="SaveImage"/>
</Grid>
</Window>
maybe you'll find a better way to draw on the WriteableBitmap using this extension, drawing method i have used it's just an experiment.