New to Kendo UI for jQuery? Download free 30-day trial

Apply Drawing API Transformations during Export

Environment

Product Progress® Kendo UI® Drawing Library
Operating System Windows 10 64bit
Visual Studio version Visual Studio 2017
Preferred Language JavaScript

Description

How can I apply geometric transformations during export while applying the Kendo UI Drawing API?

Solution

The following example demonstrates how to produce a PNG image of a page section at 4x the original resolution and applies an uniform 2x scale on the X and Y dimensions. The operation is carried out while the content is still represented in a vector form and no loss of quality occurs.

For more information, refer to the article on transformation API.

    <button type="button" class="export-img k-button k-button-md k-rounded-md k-button-solid k-button-solid-base">
      <span class="k-button-text">Export as Image</span>
    </button>
    <div class="content">
      <div id="chart"></div>
      Copyright: ACME Inc.
    </div>

    <script>
      $("#chart").kendoChart({
        title: {
          text: "Site Visitors Stats \n /thousands/"
        },
        legend: {
          visible: false
        },
        seriesDefaults: {
          type: "bar"
        },
        series: [{
          name: "Total Visits",
          data: [56000, 63000, 74000, 91000, 117000, 138000]
        }, {
          name: "Unique visitors",
          data: [52000, 34000, 23000, 48000, 67000, 83000]
        }],
        valueAxis: {
          max: 140000,
          line: {
            visible: false
          },
          minorGridLines: {
            visible: true
          }
        },
        categoryAxis: {
          categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
          majorGridLines: {
            visible: false
          }
        }
      });

      $(".export-img").click(function() {
        // Convert the DOM element to a drawing using kendo.drawing.drawDOM
        kendo.drawing.drawDOM($(".content"))
        .then(function(group) {

          group.transform(
            kendo.geometry.transform().scale(2, 2)
          );

          // Render the result as a PNG image
          return kendo.drawing.exportImage(group);
        })
        .done(function(data) {
          // Save the image file
          kendo.saveAs({
            dataURI: data,
            fileName: "Map.png",
            proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
          });
        });
      });
    </script>

See Also

In this article