Apply Drawing API Transformations during Export
Environment
| Product | Progress® Kendo UI® Drawing API |
| 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>