Canvas2Image não funciona corretamente no Chrome
Estou desenvolvendo um site para a empresa,que é basicamente um gerador de assinaturas de email,com base em um modelo que nós temos aqui.
Usei o script Canvas2Image juntamente com o Html2Canvas para transformar a <div> onde se encontra a assinatura em .png e realizar o download a mesma quando for pressionado o botão de salvar.
Porém,dentro dessa div tem um <img src="...."> que direciona a logomarca da empresa,que está na mesma pasta do projeto.
Meu problema,é que quando utilizo o Chrome,a logomarca não aparece,fica transparente,já no Firefox aparece normal,testei no IE e no Opera,e não funciona também,mas não é meu foco.
O código que uso para fazer as transformações é esse
$(function() {
$("#btnSave").click(function() {
html2canvas($("#gerador"), {
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);
}
});
});
});
O código da <div>
<div style="color:#000" id="gerador" class="container-assinatura">
<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 #f27107 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>
Anexei um exemplo do .png, um gerado no Chrome e o outro no Mozilla./monthly_2017_11/5a01d1eed2bf7_assinatura_conekta(1).png.1edac180b51193c028cf7aa5eed59c8d.png" class="ipsImage ipsImage_thumbnailed" alt="assinatura_conekta (1).png">.png.1edac180b51193c028cf7aa5eed59c8d.png)
/monthly_2017_11/assinatura_conekta(1).png.157b6df9d88a9934cabde3894e52fd85.png" class="ipsImage ipsImage_thumbnailed" alt="assinatura_conekta(1).png">.png.157b6df9d88a9934cabde3894e52fd85.png)
Discussão (0)
Carregando comentários...