Draw strokes from SurfaceInkCanvas onto image

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.