New to KendoReact? Start a free 30-day trial
Generating Images
Generating ImagesPremium
Updated on Sep 24, 2026
You can generate PNG images for charts, custom drawings, or any other visual content created with the Kendo UI Drawing library.
To generate an image on the client, use the exportImage function provided by the Kendo UI Drawing library.
The function takes the root Group of your scene, positioned at [0, 0] in the output. It returns a promise that resolves with a data:image/png Data URI. Assign the URI to an <img> element, save it to disk with a utility such as saveAs from @progress/kendo-file-saver, or upload it.
javascript
import { exportImage, Group } from "@progress/kendo-drawing";
import { saveAs } from "@progress/kendo-file-saver";
const scene = new Group();
// ... populate the scene ...
exportImage(scene).then((dataUri) => {
const img = document.createElement("img");
img.src = dataUri;
document.body.appendChild(img);
saveAs(dataUri, "scene.png");
});For more control over the exported image, like specifying the dimensions or handling cross-origin images, you can pass an ImageExportOptions object to the exportImage function.
Loading ...