Export to Image

You can export RadDiagram as an image on the client. This is done in two simple steps (Example 1):

1. Get a reference to the client-side object of the underlying Kendo UI diagram as described in the Overview help article.

2. Call the exportImage method of the client-side object of the diagram.

The export to image functionality is currently supported in Firefox, Chrome, IE10+ and Opera 15.0+ (Blink).

Example 1: Export a diagram as an image.

ASP.NET

<telerik:RadDiagram ID="RadDiagram1" runat="server">
	<LayoutSettings Type="Tree" Subtype="Down" Enabled="true">
	</LayoutSettings>
	<ClientEvents OnLoad="onLoad" />
	<ShapesCollection>
		<telerik:DiagramShape Id="DiagramShape1"></telerik:DiagramShape>
		<telerik:DiagramShape Id="DiagramShape2"></telerik:DiagramShape>
	</ShapesCollection>
	<ConnectionsCollection>
		<telerik:DiagramConnection>
			<FromSettings Connector="Top" ShapeId="DiagramShape1" />
			<ToSettings Connector="Bottom" ShapeId="DiagramShape2" />
			<StrokeSettings />
		</telerik:DiagramConnection>
	</ConnectionsCollection>
</telerik:RadDiagram>
<script type="text/javascript">
	function onLoad(diagram) {
		var diagramWidget = diagram.get_kendoWidget();
		diagramWidget.exportImage().done(function (data) {
			kendo.saveAs({
				dataURI: data,
				fileName: "diagram.png"
			});
		});
	}
</script>

You can find a list of the available parameters of the exportImage method in the Kendo UI Diagram API Reference.

See Also

• RadDiagram Client-Side Basics

• exportImage method of Kendo UI Diagram