I have integrated HTML2CANVAS to save a canvas enclosed in a div as a .png image. The functionality works perfectly in Chrome, but I encounter an issue in IE 9, 10, and 11 where nothing happens. Despite setting breakpoints for debugging in IE, no errors are thrown.
The motivation behind wrapping the canvas in a div was to facilitate exporting the legend along with the chart/graph generated within the canvas tag.
Although AngularJS is in use, only a click event is utilized in this scenario.
While everything operates smoothly in Chrome without any errors, IE fails to respond appropriately. Even after investigating, some sources suggest that IE struggles with promises and recommend adding a polyfill to address the problem. However, implementing the polyfill has not resolved the issue.
Thank you
Below is the code snippet:
HTML
<div class="row">
<div id="widget" class="col-md-12">
<canvas id="lineChartCanvas" class="chart chart-line" chart-data="data" chart-labels="labels" style="height: 300px; width: 95%;"
chart-legend="true" chart-series="series" chart-click="onClick"></canvas>
</div>
</div>
Button click event
<input type="button" class="btn btn-primary" id="btnSave" ng-click="exportChart()" ng-show="isIEbrowser" value="EXPORT CHART"/>
Javascript/Angular
function exportChart() {
var canvasdiv = document.getElementById("widget");
html2canvas(canvasdiv,{
onrendered: function (canvas) {
var a = document.createElement("a");
a.href = canvas.toDataURL("image/png");
a.download = userContext.mrn + "_chart_" + datetime + ".png";
a.click();
}
});
}