We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Export uwp diagram to image

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

Thanks
Martin

16 Replies

KR Keerthivasan Ramamoorthy Syncfusion Team September 22, 2016 01:17 PM UTC

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. 



MK Martin Kurek September 22, 2016 01:27 PM UTC

Hi Keerthivasan,

You
provides otherwise on the website:

https://www.syncfusion.com/products/uwp/diagram#exporting-and-printing

Martin


KR Keerthivasan Ramamoorthy Syncfusion Team September 23, 2016 12:10 PM UTC

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.  



PD Pierre-Christophe DUS October 11, 2016 06:38 AM UTC

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.


MK Martin Kurek October 11, 2016 07:27 AM UTC

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:

Export SfDiagram to image to PDF

Martin




PD Pierre-Christophe DUS October 11, 2016 10:48 PM UTC

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...


KR Keerthivasan Ramamoorthy Syncfusion Team October 13, 2016 04:24 AM UTC

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.  



PD Pierre-Christophe DUS October 26, 2016 08:27 AM UTC

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


MK Martin Kurek October 27, 2016 08:11 AM UTC

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


KR Keerthivasan Ramamoorthy Syncfusion Team October 27, 2016 09:52 AM UTC

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



PD Pierre-Christophe DUS December 6, 2016 10:28 AM UTC

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?



MK Martin Kurek December 6, 2016 12:43 PM UTC

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



PD Pierre-Christophe DUS January 9, 2017 05:25 PM UTC

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" :
Exception
Details

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...




MK Martin Kurek January 10, 2017 07:43 AM UTC

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


KR Keerthivasan Ramamoorthy Syncfusion Team January 10, 2017 09:31 AM UTC

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
 
  
Regards,  
Keerthivasan R.  



PD Pierre-Christophe DUS January 12, 2017 10:50 AM UTC

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.

Loader.
Live Chat Icon For mobile
Up arrow icon