<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script type="text/javascript" src="https://canvg.github.io/canvg/canvg.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<!--https://stackoverflow.com/questions/33595847/javascript-convert-html-div-with-svg-to-image-->
<body>
<div ng-app="yourAppName">
<div ng-controller="myNoteCtrl">
<div id="Screenshot" style="background-color:#fff;">
<p>This is it</p>
<svg id="circleSvg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="120" style="height: 120px; width: 250px;">
<circle id="1" cx="50" cy="50" r="50" fill="#A52A2A" ></circle>
</svg>
<svg id="circleSvg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="120" style="height: 120px; width: 250px;">
<circle id="1" cx="50" cy="50" r="50" fill="#fcc" ></circle>
</svg>
</div>
<div id="content">
<button class="button" id="saveOutput" href="#" ng-click="save()">Take Screenshot</button>
</div>
</div>
</div>
</body>
</html>
// Code goes here
var app = angular.module("yourAppName", []);
app.controller("myNoteCtrl",['$scope', function($scope) {
var svgElements = $("#Screenshot").find('svg');
//replace all svgs with a temp canvas
svgElements.each(function () {
var canvas, xml;
canvas = document.createElement("canvas");
canvas.className = "screenShotTempCanvas";
//convert SVG into a XML string
xml = (new XMLSerializer()).serializeToString(this);
// Removing the name space as IE throws an error
xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');
//draw the SVG onto a canvas
canvg(canvas, xml);
$(canvas).insertAfter(this);
//hide the SVG element
this.className = "tempHide";
$(this).hide();
});
$scope.save = function(){
setTimeout(()=>{html2canvas($("#Screenshot"), {
logging: true,
profile: true,
useCORS: true,
allowTaint: true,
onrendered: function(canvas) {
var a = document.createElement('a');
// toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
a.download = 'screenshot.jpg';
a.click();
}
});
},100);
};
}]);
/* Styles go here */