canvas2image Canvas2Image não funciona corretamente no Chrome

[OtavioCapila 0]

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>&nbsp;</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>&nbsp;</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.