exportImage

Exports the diagram content as an image. The result can be saved using kendo.saveAs.

The full content of the diagram will be exported in 1:1 scale. If exporting the current view is desired then the kendo.drawing.drawDOM method should be called on a container element.

The export operation is asynchronous and returns a promise. The promise will be resolved with a PNG image encoded as a Data URI.

Parameters

options Object (optional)Parameters for the exported image.

options.width StringThe width of the exported image. Defaults to the diagram content width.

options.height StringThe height of the exported image. Defaults to the diagram content height.

options.cors String (default: "anonymous")Specifies how cross-origin images

should be requested.

Requesting images without CORS will "taint" the canvas. It will still be visible on the page, but all script access to it is disabled to prevent information disclosure.

By default they're requested anonymously. Available options are:

• "anonymous" - do not send user credentials as part of the request
• "use-credentials" - send credentials as part of the request
• false - fetch images without CORS, possibly tainting the canvas

See crossorigin attribute for more details.

Returns

Promise A promise that will be resolved with a PNG image encoded as a Data URI.

Example - Exporting a diagram to an image

<button id="exportBtn">Export</button>
<div id="diagram"></div>
<script>
  $("#exportBtn").on("click", function(){
    var diagram = $("#diagram").getKendoDiagram();
    diagram.exportImage().done(function(data) {
      kendo.saveAs({
        dataURI: data,
        fileName: "diagram.png"
      });
    });
  });
  $("#diagram").kendoDiagram({
    dataSource: {
      data: [{ "items": [{ items: [{}] }] }],
      schema: { model: { children: "items" } }
    },
    layout: {
      type: "tree"
    }
  });
</script>