Export uwp diagram to image

[Martin Kurek]

Hi,

Is it possible export uwp diagram into image? If yes, can you send me example please?

Thanks

Martin

[Keerthivasan Ramamoorthy]

Hi Martin, 

 

Requirement:” Need to Export UWP Diagram into Image”. 

  

Currently, we don’t have support to achieve your requirement. We have considered your requirement as a feature. We will implement this feature in any of our volume releases. We will appreciate your patience until then. 

 

Regards, 

Keerthivasan R. 

[Martin Kurek]

Hi Keerthivasan,

You provides otherwise on the website:
https://www.syncfusion.com/products/uwp/diagram#exporting-and-printing

Martin

[Keerthivasan Ramamoorthy]

Hi Martin,  

 

We are deeply regret for the inconvenience caused. We have included this Exporting and Printing content in our Control Page documentation link by mistake. As already updated we considered your requirement “Need to Export UWP Diagram into Image” as a feature and we will implement this in any of our upcoming volume releases.   

  

Note:  

We have support to Export Diagram into Image in WinRT. 

 

Regards,  

Keerthivasan R.  

[Pierre-Christophe DUS]

Do you know when this feature will be available?

I'm looking for a component allowing me to add some basic shapes (rectangles, ellipses, ...) on a photo, and then save it in a BitmapImage. I tested diagram, but I don't know if it's adapted, especially if we can't save an image.

[Martin Kurek]

Hi Pierre,

I have found workaround, I have used RenderTargetBitmap.RenderAsync on instance SfDiagram, work fine, but this solution has restriction: diagram must be in Visual Tree!

 protected async Task<IRandomAccessStream> GenerateImage(UIElement diagram)

        {           

            // Render to an image at the current system scale and retrieve pixel contents

            var renderTargetBitmap = new RenderTargetBitmap();

 

            // unselect all nodes

            ObservableCollection<TraNode> nodes = ((diagram as SfDiagram).Nodes as ObservableCollection<TraNode>);

            if(nodes != null && nodes.Count > 0)

            {

                foreach (var node in nodes)

                {

                    node.IsSelected = false;

                }

            }

 

            await renderTargetBitmap.RenderAsync(diagram);

            var pixelBuffer = await renderTargetBitmap.GetPixelsAsync();

 

            var pixelBytes = new byte[pixelBuffer.Length];

            using (var reader = DataReader.FromBuffer(pixelBuffer))

            {

                reader.ReadBytes(pixelBytes);

            }

                       

            IRandomAccessStream stream = new InMemoryRandomAccessStream();

            var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, stream);

 

            encoder.SetPixelData(

                BitmapPixelFormat.Bgra8,

                BitmapAlphaMode.Straight,

                (uint)renderTargetBitmap.PixelWidth,

                (uint)renderTargetBitmap.PixelHeight,

                DisplayInformation.GetForCurrentView().LogicalDpi,

                DisplayInformation.GetForCurrentView().LogicalDpi,

                pixelBytes);

 

            await encoder.FlushAsync();

           

            return stream;

        }

 

I have used this method to export image from diagram layers as PNG to PDF, here is a result:

Martin

[Pierre-Christophe DUS]

Hi Martin,

Thanks for you feedback!

In your screenshot, we can see a part of your toolbar with some shapes: do you have used Diagram for this?

Which sample do you recommand me for understanding how it works? In the samples, I only find "special" diagrams ("Flow Diagram", "Node Content", ...) but not a simple one describing how to drag & drop simple shapes on the main area...

[Keerthivasan Ramamoorthy]

Hi Pierre,   

Currently, we don’t have an immediate plan to implement the requested feature “Need to Export UWP Diagram into Image”.  

The feature implementation would also greatly depend on the factors such as product design, code compatibility and complexity. We will implement this in any of our upcoming volume releases. We will get back to you once this feature has been implemented.   

   

  

Regards,   

Keerthivasan R.  

[Pierre-Christophe DUS]

Hi Martin,
I tried to reproduce your solution, but I don't see what is the "TraNode" object: could you help me?
Thanks,

[Martin Kurek]

Nothing special ;)
 public class TraNode : Syncfusion.UI.Xaml.Diagram.Node
    {
        public Guid Id { get; set; }
    }

[Keerthivasan Ramamoorthy]

Hi Pierre,
Please let us know if you need any other assistance. 

 

Regards, 

Keerthivasan R. 

[Pierre-Christophe DUS]

Hi Martin,
Your solution works very fine in many cases, thank you!

But I would like to know how you have setted your background image?
- as a Node of the SfDiagram

- through the Background property of the SfDiagram
- though the PageBackground of the PageSettings 

For me, the best way seems be to use the Background property:

<syncfusion:SfDiagram x:Name="diagram">

    <syncfusion:SfDiagram.Background>

        <ImageBrush ImageSource="/Assets/BackgroundImage.jpg" Stretch="Uniform"

                    AlignmentX="Left" AlignmentY="Top" 

        />

    </syncfusion:SfDiagram.Background>

In my cases, the image could be:

- a photo taken by the user of the tablet app (in this case I know the image's "ratio" as I force do save the photo in 1920*1080)

- an image added by a user of the web app, as the data are synced (in this case the ratio can vary, as there are no size restrictions)

=> the problem is that your code takes a "screenshot" of all the the SfDiagram's area, so if the background image is smaller, there are black or white stripes below or next to the image. is there a way to manage this?

[Martin Kurek]

Hi Pierre,

 

<Grid x:Name="RenderedGrid" Grid.Row="0" Grid.Column="0" Margin="0,60" Background="White">

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="542"/>

            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>

                <RowDefinition Height="534"/>

            </Grid.RowDefinitions>

 

            <Image Grid.Row="0" Grid.Column="0" Source="/Assets/body-normal.jpg" Width="542" x:Name="RenderTeloNormal"/>

 

            <controls:Diagram Grid.Row="0" Grid.Column="0" Background="Transparent" Width="542" Height="534"

                              x:Name="diagram" HorizontalAlignment="Left" Tool="SingleSelect"

                              Nodes="{Binding Nodes, Mode=TwoWay}"

                              IsEnabled="{Binding TraModel.SineEnb, Converter={StaticResource FalckNullToBooleanConverter}}">

            </controls:Diagram>

            

        </Grid>

 

I have exported only png of objects from sfDiagram added from stencil, background Image I have added manualy to PDF:

Stream imageBodyEmptyStream = typeof(NahladPageViewModel).GetTypeInfo().Assembly.GetManifestResourceStream("Falck.UILogic.Assets.body-baw.jpg");

            var imageBodyEmpty = new PdfBitmap(imageBodyEmptyStream);

and than:

            // Replace the first image in the page.

            //document.Pages[0].ReplaceImage(0, bmp);

            // NO Replace in UWP: https://www.syncfusion.com/forums/125998/how-to-replace-an-image,

            // but in documentation: https://help.syncfusion.com/file-formats/pdf/working-with-images#replacing-images-in-an-existing-pdf-document                       

            document.Pages[0].Graphics.DrawImage(imageBodyEmpty, 185, 300, 125, 125);

            document.Pages[0].Graphics.DrawImage(imageBodyObjectsFromStencil, 172, 288, 150, 150);

Martin

[Pierre-Christophe DUS]

Hi Martin,

Thanks again for your feedback.

In your case, you have a fixed size: 542x534.

In my case, there are are 2 possibilites:

- a fixed size too (1920x1080) if the image comes from the camera

- an undefined size if the image comes from the web app 

So it's more hard to keep the original ratio of the image, when you generate the image.

In add, have you ever meet an exception with this method?

I meet an exception when I export an image for the second time :

- take a photo with the camera : OK

- edit the photo by adding shapes : OK

- export the image : OK

- take another photo with the camera : OK

- edit the photo by adding shapes : OK

- export the image : exception

The exception occurs on "RenderTargetBitmap.RenderAsync" :

Would you have an idea?

I don't unterstand why this works the first time, but not the second one: maybe a a Refresh problem...

[Martin Kurek]

Hi Pierre,

Exception “Value does not fall within the expected range” means that rendered element instance in your case “diagram” is not in actual Visual Tree (you have to see diagram when you are exporting).

Martin

[Keerthivasan Ramamoorthy]

Hi Pierre,  

Reported issue:” The Value does not fall within the expected range”. 

 

We have analyzed your reported issue. The RenderTargetBitmap can't render something which is not in the visual tree, or in popup, etc. Please refer the msdn link for the details from “XAML visuals and RenderTargetBitmap capture capabilities” title. 

 

Link: https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.Media.Imaging.RenderTargetBitmap?redirectedfrom=MSDN&view=winrt-20348   

  

Regards,  

Keerthivasan R.  

[Pierre-Christophe DUS]

Thanks f or your feedbacks.

In my case, this error came from the Messenger that is used between the ViewModel and the View: this fired several times the Export Command, which calls the GenerateImage() method.