I have the following div
<div class="jumbotron" ng-app>
<div class="row">
<div class="col-md-4">
<input type="text" ng-model="yourName" placeholder="Seu nome">
<br />
<a href="javascript:genScreenshot()"> Get Screenshot</a>
<a id="test"></a>
</div>
<div class="col-md-4">
<div class="container" id="cont_img" style="position:relative">
<img src="" id="bn_Fita" style="position:absolute" />
<img src="" id="bn_Insignia" style="position:absolute" />
<img src="" id="bn_Marca" style="position:absolute" />
<div style="position:absolute; top:50px; left:200px; color:white">{{yourName}}</div>
<br />
<br />
</div>
</div>
</div>
The function genScreenshoot()
function genScreenshot() {
html2canvas($('#cont_img'), {
allowTaint: true,
letterRendering: 1,
onrendered: function (canvas) {
if (navigator.userAgent.indexOf("MSIE ") > 0 ||
navigator.userAgent.match(/Trident.*rv\:11\./)) {
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob, 'Test file.png');
}
else {
$('#test').attr('href', canvas.toDataURL("image/png"));
$('#test').attr('download', 'Test file.png');
$('#test')[0].click();
}
}
});
}
But this function is only saving the text, the images inside that same div are not being rendered. Remembering that% of% are set when the user chooses an image. And this screenshot function is only called when user clicks the button, so the images are there.