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

Apply Transformations During Export

The following example demonstrates how to apply geometric transformations during export while applying the Kendo UI Drawing API.

The aim of the example is to produce a PNG image of a section of the page at 4x the original resolution. This is done by applying 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. No loss of quality occurs.

For more information, refer to the Transformation API article.

    <button class='export-img k-button'>Export as Image</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
Not finding the help you need? Improve this article