Tenho a seguinte 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>
A função 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();
}
}
});
}
Mas essa função só está salvando o texto, as imagens dentro dessa mesma div não estão sendo renderizadas. Lembrando que o src
delas são setados quando o usuário escolhe uma imagem. E essa função de screenshot só é chamada quando usuário clica no botão, então as imagens estão lá.