All Components

Exporting Drawings to Images

The Drawing library supports the export of drawings to bitmap images in a PNG file format.

import { Path, Text, Group, exportImage } from '@progress/kendo-drawing';
import { saveAs } from '@progress/kendo-file-saver';

export function exportScene() {
  // Create a path and draw a straight line
  const path = new Path({
    stroke: {
      color: `#9999b6`,
      width: 2
    }
  });

  path.moveTo(0, 50).lineTo(200, 50).close();

  // Create the text
  const text = new Text(`Hello World!`, [20, 25], {
    font: `bold 15px Arial`
  });

  // Place all the shapes in a group
  const group = new Group();
  group.append(path, text);

  exportImage(group).then((data) => {
      saveAs(data, "scene.png");
  });
}

import { Component } from '@angular/core';
import { exportScene } from './export-scene';

@Component({
  selector: 'my-app',
  template: `
      <button (click)="onClick()">Export PNG...</button>
  `
})
export class AppComponent {
  public onClick() {
    exportScene();
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

In this article