Ir para conteúdo
OtavioCapila

Canvas2Image não funciona corretamente no Chrome

Recommended Posts

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.

assinatura_conekta (1).png

assinatura_conekta(1).png

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Bobrinha
      Olá a todos.
       
      Tenho uma dúvida e não sei se é possível caso tenha alguma sugestão por favor avise.
       
      Adicionar resultado de um innerhtml dentro de um link atributo href é possível? ou seja eu tenho um input onde seleciono um ano 
       
      <select id="ano"> <option selected>2019</option> <option value="2018">2018</option> <option value="2017">2017</option> </select> <div id="anoAtual"></div> No query pego o valor ou seja o ano selecionado e jogo no html
       
      $("select").change(function () { document.getElementById("ano").innerHTML = document.getElementById("anoAtual").value; });  
      Agora vem a dúvida como eu jogo na URL? existe uma outra forma? é possível?
       
      <a href='resultado.php&ano=COMO JOGAR O ANO AQUI?'>  
       
    • Por Camila97
      Olá, estou tendo dificuldades em um site onde preciso desenvolver um modal ao clicar no botão X para excluir uma despesa, porém, o botão X foi criado no arquivo .js :
      //botão de excluir: let btn = document.createElement("button") btn.className = 'btn btn-danger' btn.innerHTML = '<i class="fas fa-times"></i>' btn.id = `id_despesa_${d.id}` btn.onclick = function(){ let id = this.id.replace('id_despesa_', ''); bd.remover(id) window.location.reload() } linha.insertCell(4).append(btn) console.log(d) Toda despesa criada, automaticamente é adicionado o botão X ao lado da despesa.
      Como poderia fazer aparecer um modal ao clicar nele, para saber se o usuário quer cancelar ou excluir a despesa?
    • Por tiagosp
      Estou tentando aplicar uma simples expressão com js, porém o resultado não é como esperado:
      var horasP = document.getElementById("horas_p").value; //Valor de entrada: 5 var minP = document.getElementById("min_p").value; // Valor de entrada: 45 horasP *= 60 + minP; console.log(horasP); saída: 30045 Ocorre uma concatenação na saída, ele executa somente a multiplicação.
      Pensei ser um erro na minha expressão, então tentei:
      horasP *= 60; horasP += minP; saída: 30045 Além disso, o operador "/=" simplesmente não funciona...
    • Por Brxlx
      Estou tentando inserir essa lógica no scroll da minha página, ele pega corretamente a condição do ife entra no laço. Para todos os demais elementos da página que geram o scroll, ele rola certo, apenas para o button#conheca que não consigo fazer o cálculo da altura. Preciso que ele pegue o offset e some com a altura, devido ao menu que abre em mobile, mas ele está sendo sobrescrito pelo scrollTop anterior.
      Com qual função devo verificar para executar corretamente a lógica?
      if($(window).width() <= 768){ $("html, body, button:not(#conheca)").animate({ scrollTop: (target.offset().top - $(window).height()) }, 1000, "easeInOutExpo"); return false; $("#conheca").on("click", function(){ $('#conheca').animate({ scrollTop: (target.offset().top + $(window).height()) }, 1000, "easeInOutExpo"); return false; }); }else{ $('html, body').animate({ scrollTop: (target.offset().top) }, 1000, "easeInOutExpo"); return false; }
    • Por Bisnaguitos
      Estou tentando pegar dados de algumas ordens de uma API. Primeiro preciso pesquisar todas as ordens com uma requisição e depois de pegar o id dessas ordens fazer outra requisição para outra uri da API para pegar os dados de cada ordem. O problema é que não consigo resgatar os dados de retorno através de um array.
      Segue uma tentativa sem sucesso
      // request de busca const data = await request.get("api.com/search", async(err, data, body)=>{ var arr = [] for(i=0;i<data.length;i++){ const result = await request.get("api.com/order/"+data.id, (e, d, b)=>{ arr.push(d.title) return arr }) } return result; }) console.log(data) Fiz esse código pelo celular só pra exemplificar um dos métodos. Alguém sabe como posso fazer isso funcionar ou se tem uma maneira mais fácil? Obrigado
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.