Jump to content
Ericsson Berg

[Resolvido] Copiar imagem para área de transferência

Recommended Posts

Olá galera!!

 

Tô tentando resolver um problemãooo!!!

 

Com o Canvas consegui um dos meus objetivos principais que é transformar uma tabela em imagem, sendo que somente gerando no html, mas como copiar para área de transferência e assim poder colar num documento word, excel, email, etc...

 

Com texto é fácil, mas com imagem não deu jeito mesmo.

 

Alguém tem uma ajuda?

 

Share this post


Link to post
Share on other sites

Segue o que consegui até agora. Exemplo teste.

 

Faz quase tudo, só não copia a imagem para a área de transferência.

 

Vi que copia um quadrado em branco.

<html>
 <head>
 
<script src="https://code.jquery.com/jquery-3.1.0.js"   integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="   crossorigin="anonymous"></script>       
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
 
 </head>
 <body >
   

<input id="copy_btn" type="button" value="copy" onclick="copyElement('table')"><br>
<!--<button type="buttom" onclick="duplicar()">Copiar</button>-->
<a href="#" id="salvar">SALVAR</a>   
  <!-- <iwmg src="d.jpg"/>-->
   
	 <TABLE id="table" class="table" BORDER=1> <! Inicia a tabela e coloca uma borda de espessura igual a 1>
		<TR> <! Cria a primeira linha da tabela>
			<TD>PRIMEIRA COLUNA </TD> <! Aqui foi criada uma célula>
			<TD>SEGUNDA COLUNA </TD>
			<TD>TERCEIRA COLUNA </TD>
		</TR> <! Fecha a primeira linha da tabela>
		<TR> <! Abre a segunda linha da tabela>
			<TD> PRIMEIRA COLUNA</TD>
			<TD>SEGUNDA COLUNA </TD>
			<TD>TERCEIRA COLUNA </TD>
		<TR> <! Encerra a Segunda linha da tabela>
	</TABLE> <! Encerra a tabela> 
	
	<div class="img" >
		<img id="imageCanvas">
		</div>
	<div class="can" ></div>
 </body>
 <script>

function copyElement(id) {
	
	html2canvas($(".table"), {
	  onrendered: function(canvas) {
	   // $(".img").append(canvas);
	   
		var image = new Image();
		imgData = canvas.toDataURL("image/png");  
		
		document.getElementById('imageCanvas').src = imgData;

		//$(".img").append(image);
	//	document.write('<img src="'+image+'"/>');
	  }
	});

	//SEleciona e copia a imagem -> Mas não copia apesar do elemento existir
	var element = document.querySelector('img');
	var range = document.createRange();
	range.selectNode(element);
	window.getSelection().removeAllRanges();
	window.getSelection().addRange(range);
	document.execCommand('Copy');
  
}

//Faz download da imagem
document.getElementById('salvar').addEventListener('click', function(e){
	this.href = imgData; // source
	this.download = 'canvas.png'; // nome da imagem
	return false;
});


 </script>
</html>

 

Share this post


Link to post
Share on other sites

Consegui chegar numa solução.

 

Um script .js e uma script .php.

 

Executando em dois passos:

 

o 1º gerar a imagem e o 2º copia para a área de transferência.

 

Como estou melhorando o script, assim que tiver ele finalizado eu posto aqui, é simples e acho que poderá ajudar quem estiver nessa mesma situação a qual me encontrava.

Share this post


Link to post
Share on other sites
Em 14/05/2017 at 18:02, Ericsson Berg disse:

Consegui chegar numa solução.

 

Um script .js e uma script .php.

 

Executando em dois passos:

 

o 1º gerar a imagem e o 2º copia para a área de transferência.

 

Como estou melhorando o script, assim que tiver ele finalizado eu posto aqui, é simples e acho que poderá ajudar quem estiver nessa mesma situação a qual me encontrava.

 

Cara, se você conseguiu terminar, compartilha conosco. Estou precisando de algo assim.. Muito obrigado!!!!

Share this post


Link to post
Share on other sites

Pelo amoor, se realemente chegou em uma solução, posta aqui pra gente amigo! Estou quase desistindo de tanto que tentei e não consegui resolver essa questão em um projeto... rsrs

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Renata88
      Bom dia pessoal,
       
      Alguém sabe se tem alguma biblioteca php para extrair imagem de pdf?
      Nas minhas buscas pelo google, eu só consegui encontrar para extrair texto de pdf.
       
       
       
    • By JaCoBBluE
      Bom dia, amigos!
      Antigamente no site de um cliente, eram exibidas as fotos dos associados com base no ip do servidor (exemplo abaixo):
      http://189.45.207.60:3004/imagens/456631.jpg <img class="img-fullwidth" src="http://189.45.207.60:3004/imagens/<?php echo str_replace("\\\SVR-MTG\Imagens\Fotos\\", "", $json_str[$k]['out_foto']); ?>" alt="" width="165" height="219"> Foi encerrado o contrato com a empresa que desenvolveu o site antigo e desde então o link não exibe mais as imagens...
      Alguém pode me dar uma luz do que pode ser, se é necessário liberar alguma porta no modem ou outra coisa?
       
      Muito obrigado!
      Jeferson
    • By Thurcos
      Opa, tudo bem ? sou novo aqui e comecei a usar o Illustrator e o Photoshop para um projeto, acontece que ao criar o logo no Illustrator quando eu pego o logo selecionado no illustrator e mando para PS ele simplesmente perde muito a qualidade, o que posso fazer para solucionar o problema ? 
       
      ps: o problema só acontece quando eu diminuo o tamanho do vetor/imagem no Photoshop, quando eu aumento a resolução ela é excelente, mas no caso eu preciso deixar o logo de canto 
       
      1º imagem : com o simbolo de canto o qualidade esta ruim
      2º imagem : o pouco de zoom que eu dou ela já fica totalmente ilegível 
      3º imagem : eu aumentando ela fica legível 
      4º imagem: ela no Illustrator
       
      sei que um vetor não tem pixel e não é uma imagem, mas tem como eu usar a resolução boa do Illustrator no PS ? 
       
      se eu crio um arquivo no Illustrator o tamanho que eu crio ele interfere quando mando pro Photoshop ?
       
      ps: eu não salvei como imagem nem nada eu apenas selecionei o vetor a arrastei para o Photoshop 




    • By kikekun
      Olá!
      Eu queria fazer um criador de personagens para colocar na web, e tomei como base este código aqui: https://codepen.io/kristenmay/pen/kkkdBr pra fazer em javascript, mas ainda ta limitado pro que eu quero.
      Preciso de um botão que altere mais de uma imagem ao mesmo tempo (por exemplo: pra fazer com que duas imagens de cabelo apareçam ao mesmo tempo, uma na camada da frente, outra na de trás);  um botão para alterar as cores das imagens (até consegui colocar essa barra de HUE, mas ela só muda a cor da primeira imagem, e quando passa, volta pro padrão (esse vermelho que coloquei em todas pra facilitar). mas o ideal mesmo seria um botão especifico pra o tipo de imagem que esteja sendo mudada, por exemplo... o de cabelos mudaria a cor da imagem entre moreno; castanho claro; castanho escuro; branco; loiro claro; loiro escuro; e ruivo... já o botão de cor da pele mudaria entre branco; pardo; asiatico e negro); e um botão de download para as pessoas baixarem seu personagem criado = P Da pra fazer isso? como eu faço? xD (posso tentar postar o codigo em algum lugar se precisar)

      Ta assim:

    • By ccs
      Olá,
      Ao subir um código HTML pra internet, as imagens não aparecem. Como faço para resolver isso?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.