0
I’m using a script to save a div in png. Inside this div has one , but this image does not appear in the final result, after saving. The code I’m using is this
$(function() {
$("#btnSave").click(function() {
html2canvas($(".container-assinatura"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
var photo = canvas.toDataURL('image/png');
//Convert and download as image
Canvas2Image.saveAsPNG(canvas);
// Clean up
document.body.removeChild(canvas);
}
});
});
});
Remembering that this script doesn’t work in Chrome, only in Mozilla,and here in the company where I work,95% of people use Chrome. Edit: The HTML of my code is this
<div style="color:#000" class="container-assinatura">
<div id="gerador">
<p style="margin-bottom: 0in"></p>
<table class="MsoNormalTable" style="border-collapse:collapse" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="height:84.8pt">
<td style="width:154.25pt;border:none;border-right:solid #E36C0A 2.0pt; padding:0cm 5.4pt 0cm 5.4pt;height:84.8pt" valign="top" width="206">
<p class="MsoNormal">
<span style="font-size:16.0pt"><o:p> </o:p></span>
</p>
<p class="MsoNormal">
<div id="logo_position">
<img id="logo_filial" src="png/marca_laranja.png">
<span
style="font-size:9.0pt"><o:p></o:p>
</span>
</div>
</p>
</td>
<td style="width:205.55pt;border:none;padding:0cm 5.4pt 0cm 5.4pt; height:84.8pt" valign="top" width="274">
<p class="MsoNormal">
<b>
<span style="color:#E36C0A"><b>{{nome}}</b></span>
</b>
<b>
<span style="font-size:9.0pt;color:red"></span><br>
</b>
<b>
<span style="font-size:9.0pt;color:gray">{{setor}}<i><br></i></span>
</b>
<span style="font-size:9.0pt;color:gray"><o:p></o:p></span>
</p>
<p class="MsoNormal">
<span style="font-size:9.0pt;color:black"><b>Tel:</b> {{telefone}}<br><b>E-mail:</b> </span>
<span style="font-size:9.0pt">
<a href="mailto:{{email}}">
<span style="color:blue">{{email}}</span>
</a>
<br><span><b>Rocket.Chat:</b> {{rocket}}</span>
<span style="font-size:9.0pt"><o:p></o:p></span>
</span>
</p>
</td>
</tr>
</tbody>
</table>
<p style="margin-bottom: -72px"><o:p> </o:p><font face="Ubuntu
Light"><font size="3"><br>
</font></font><br>
</p>
<div class="moz-signature"> </div>
<p style="margin-bottom: 0in"><br>
</p>
<div class="moz-signature"> </div>
</div>
</div>
<input type="button" id="btnSave" class="btn btn-dark" value="Salvar Assinatura">
Strange, because I use and works in Chrome. Only with this code is difficult to help, post also your
html– Rafael Augusto
I edited with the <div code>
– Otávio Capila
A doubt, on your screen, the image is displayed (without giving the
scroll)?– Rafael Augusto
What do you mean give the scrool? You talk scroll the screen down?
– Otávio Capila
Exactly!!!!!
– Rafael Augusto
Yes, it usually appears on both of the monitors I use, one of which is slightly smaller than the main one.
– Otávio Capila
You could reproduce the error in a
JSFiddle?– Rafael Augusto
The whole page itself is quite small, as the <div> is an email signature. The whole project is from a signature generator, so it’s nothing too extensive.
– Otávio Capila
So please play this page on
JSFiddleand then we can see the supposed mistake happening and help solve the problem.– Rafael Augusto
I’ll try to use Jsfiddle.
– Otávio Capila
https://jsfiddle.net/FxHound/04t28hau/
– Otávio Capila
The problem is basically the following, when pressing the Save Signature button, that white <div> is saved in . png, but the logo (in this case the AMD logo) does not come in the final result in . png.
– Otávio Capila
I don’t know if it has anything to do with it,..
– Otávio Capila