Add text to image from camera capture

Question

I'm attempting to create a metro app that will capture an image from the tablet camera. However at time of capture I want to overlay a date stamp on the image.

/// <summary>
    /// This is the click handler for the 'CaptureButton' button.
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private async void CapturePhoto_Click(object sender, RoutedEventArgs e)
    {
        try
        {
            rootPage.NotifyUser("", NotifyType.StatusMessage);

            // Using Windows.Media.Capture.CameraCaptureUI API to capture a photo
            CameraCaptureUI dialog = new CameraCaptureUI();
            Size aspectRatio = new Size(16, 9);
            dialog.PhotoSettings.CroppedAspectRatio = aspectRatio;

            StorageFile file = await dialog.CaptureFileAsync(CameraCaptureUIMode.Photo);
            if (file != null)
            {
                BitmapImage bitmapImage = new BitmapImage();
                using (IRandomAccessStream fileStream = await file.OpenAsync(FileAccessMode.Read))
                {
                    bitmapImage.SetSource(fileStream);
                }

                // add code for text overlay here


                CapturedPhoto.Source = bitmapImage;
                ResetButton.Visibility = Visibility.Visible;

                // Store the file path in Application Data
                appSettings[photoKey] = file.Path;
            }
            else
            {
                rootPage.NotifyUser("No photo captured.", NotifyType.StatusMessage);
            }
        }
        catch (Exception ex)
        {
            rootPage.NotifyUser(ex.Message, NotifyType.ErrorMessage);
        }
    }

Normally to add text on an image I'd use.

Graphics g = Graphics.FromImage

However it seems that System.Drawing is gone. What else can I use to overlay text on the captured image?

Answer 1

Windows.UI.Xaml doesn't have a direct raster graphics api. You can get the raw pixels from a WriteableBitmap or from a BitmapDecoder, but there is no high level way in-box to draw on them.

There are several options to draw text onto the image:

1. Interop to DirectWrite and pass the bitmap in for manipulation.
2. Find a 3rd party library that will draw directly on your pixel buffer (I'm not sure if any can do this: for general drawing many people use WriteableBitmapEx, but I don't believe it can do text in a Windows Runtime app. Also check out the WinRTXamlToolkit )
3. Create a Grid with your bitmap in an Image control and a TextBlock with your overlay then use RenderTargetBitmap to render the Grid to a bitmap.
4. Win2d is designed to expose Direct2d to Windows Store apps. It is a work in progress, but text is currently implemented. See https://github.com/Microsoft/Win2D

I'd start with Win2d to see if it can do what you need.