Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How do I remove grey background color from an image drawn with the .net maui drawing view?

I have a .NET MAUI drawing view with the background set to white in the following code on a separate XAML page apart from the previous page where the result is displayed. The problem is though for some reason, I keep getting a grey background on the finished image after submitting the drawing view. Here is the code for the .net MAUI drawing view:

<control:LandscapeContentPage  
....
            xmlns:views="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
....
    >
....
<views:DrawingView x:Name="signatureView"
    Lines="{Binding SignatureLines}"
    HorizontalOptions="FillAndExpand" 
    VerticalOptions="FillAndExpand"
    BackgroundColor="White"
    LineColor="Black"
    LineWidth="2" 
    DrawingLineCompletedCommand="{Binding LineCompletedCommand}"
    IsMultiLineModeEnabled="true"
    ShouldClearOnFinish="false" />
...
</control:LandscapeContentPage>

Here is the underlying view model code for creating a line and then saving the drawing view image via a button click:

//Drawing the line on the drawing view:
        private async void OnLineCompletedCommand(IDrawingLine line)
        {
            SignatureLines.Add(line);



#if ANDROID
            var stream = await SignatureView.GetImageStream(500, 500);
            SignatureBytes = ((MemoryStream)stream).ToArray();
#elif IOS
            var imageData = await SignatureView.GetImageStream(500, 500);
            var imageNsData = NSData.FromStream(imageData);
            var nsStream = imageNsData.AsStream();
            var stream = new MemoryStream();

            nsStream.CopyTo(stream);

            SignatureBytes = stream.ToArray();
#endif

            SignatureImage = new Image();

            SignatureImage.Source = ImageSource.FromStream(() => stream);
        }

//Saving the image
private async Task OnSubmitCommand()
{
    if (!Busy)
    {
        Busy = true;

        if (_sessionGUID.HasValue)
        {
            DisplayNotSignedError = (SignatureLines == null || SignatureLines.ToList().Count == 0);
            DisplaySignatureError = !(SelectedParent.Key > 0 || (SelectedParent.Key <= 0 && !string.IsNullOrEmpty(OtherSignature)));

            if (!DisplaySignatureError && !DisplayNotSignedError)
            {
                await _dataService.Sessions.AddOrUpdateParentSignature(_sessionGUID.Value, SelectedParent.Key > 0 ? SelectedParent.Value : OtherSignature, SignatureBytes);

                await _navigationService.TryNavigateBackAsync(Constants.ATrack.SESSION_GUID, _sessionGUID.Value);
            }
        }

        Busy = false;
    }
}

Here are the results I get after using the aforementioned code. Notice how the background is grey when the image is submitted and the page is navigated back to the previous one:
Image of signature image with Grey back ground

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

I thought that just by simply setting the background image to either white or transparent would resolve this issue, but this did not help. Any advice on how to fix this would be much appreciated.

>Solution :

GetImageStream has an argument that specifies the background color

GetImageStream(IEnumerable<IDrawingLine> lines, 
    Size imageSize, 
    Brush? background, 
    CancellationToken token = default) =>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading