$(document).ready(function () {
    $(document).on('click', "#btn-frame-download", function () {
        var element = document.getElementById("graph-collection"); // global variable
        if (element == null) {
           element = document.getElementById("prob-graph"); // global variable
           if (element == null) {
               element = document.getElementById("was-graph"); // global variable
           }
        }
        getCanvas(element);
    });
});

function getCanvas(element) {
        html2canvas(element, {
		  scrollX: 0,
		  scrollY: 0,
          allowTaint: true,
          useCORS: true,
          async: true,
          windowWidth: element.width,
          windowHeight: element.height,
          logging: true,
          imageTimeout: 0,
		  ignoreElements: function( element ) {
			  if( element.classList.contains( 'leaflet-control-zoom' )) {
				return true;
				}
			  }
    }).then(function (canvas) {
            saveAs(canvas.toDataURL(), 'image.png');
    });
}

function saveAs(uri, filename) {
  var link = document.createElement('a');
  if (typeof link.download === 'string') {
    link.href = uri;
    link.download = filename;

    //Firefox requires the link to be in the body
    document.body.appendChild(link);

    //simulate click
    link.click();

    //remove the link when done
    document.body.removeChild(link);
  } else {
    window.open(uri);
  }
}
