img inside div does not appear when used canvas2image

0

I'm using a script to save a div in png. Within 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 does not work in Chrome, only in Mozilla, and here in the company where I work, for which I'm developing this, 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>&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>           
            </div>
<input type="button" id="btnSave" class="btn btn-dark" value="Salvar Assinatura">

    
asked by anonymous 06.11.2017 / 19:25

0 answers