Set background image to drawingview and save it with the lines

[maslewandowski]

Hi guys,
i'm currently using the drawingview to give my coworkers the possibility to create sketches while visiting customers.

They asked me, if it is possible to capture a photo with the device and then draw sketches on the captured photo.
I noticed, that the current Background property only supports Brushes.

How about a property 'BackgroundImage' or 'BackgroundSource' to set an image as background and the possibility to save the background image with the drawinglines?

This feature would be awesome!

greetings

[stephenquan]

Does ViewExtensions.CaptureAsync do anything for you?

[ngieske-MSI]

Unfortunately this would not work for our application, which needs to allow users to edit an image file "directly". Capturing a screenshot of the application potentially changes the size of the base image depending on the size of the editing window, plus it can add extra margins of empty space on the sides or top/bottom.

It would be much better if I could limit the editable area of the DrawingView itself to the displayed background image, and then scale the drawn line image to the size of the original image using DrawingView.GetImageStream.

[stephenquan]

Before working on C# and .NET, I worked on a C++ native library that took advantage of the fact that the JPEG spec could be extended to store large amounts of metadata. One location considered was EXIF, but, it was quickly abandoned due to the 64K limit. The other was in custom APP markers, e.g. APP10, which is similar to EXIF but didn't have the 64K limit because you could have utilized multiple APP10 markers. As to the API, it was along the lines of:

void SaveImageMetadata(string jpegPath, string name, IStream* stream);
IStream* LoadImageMetadata(string jpegPath, string name);
void DeleteImageMetadata(string jpegPath, string name);

The types of things we were storing were XML, JSON, and, sometimes, even the original JPEG image before the vectors were applied to it.

When implementing LoadImageMetadata, we basically iterate through the JPEG header markers until we found the APP10 markers and we sequentially connected the APP10 markers based on he name key and return the bytes from those markers.

When implementing SaveImageMetadata, the source JPEG was rewritten as a temporary destination JPEG. It copied the non-APP10 markers, but, with the APP10 markers, it replaced them to implement delete/modify and add actions. The effort lies in building a correct new JPEG header. The JPEG image portion was copied without the need to decode/encode.

To render, you could just use a Grid so the original JPEG image and the JPEG metadata causing the vectors to be drawn on top of the image.

<Grid>
    <Image />
    <DrawingView />
</Grid>

[chasy-adler]

Hi @stephenquan,
if i do as your suggestion how can i save the image with the lines as a new image?