Ir para conteúdo
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?

 

Compartilhar este post


Link para o post
Compartilhar em outros 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>

 

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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!!!!

Compartilhar este post


Link para o post
Compartilhar em outros 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

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 joaon77@yahoo.com.br
      Olá pessoal!
      Criei um menu usando listas não ordenadas (ul, li) com as imagens dispostas horizontalmente. São quatro imagens. O problema é que uma das imagens aparece duplicada no layout. Não entendi. Segue o código:
      ... <span class="menuRedesSociais"> <ul> <li id="img1"><a href="#"</a></li> <li id="img2"><a href="#"></a></li> <li id="img3"><a href="#"></a></li> <li id="img4"><a href="#"></a></li> </ul> </span> span ul { margin: 0; padding: 0; } span li { list-style: none; display: inline-block; } span a:link, a:visited { padding: 15px; } li#img1 a{ background-image: url("#img1"); background-repeat: no-repeat; } li#img2 a{ background-image: url("#img2"); background-repeat: no-repeat; } li#img3 a{ background-image: url("#img3"); background-repeat: no-repeat; } li#img4 a{ background-image: url("#img4"); background-repeat: no-repeat; } A imagem que aparece duplicada é a img2. Obs. Já fiz o teste trocando a posição das imagens, só que o problema continua.
       
      Agradeço muito se alguém puder me ajudar.
       
    • Por Raphaeldidata
      Vamos supor que eu coloque uma logomarca no topo do meu site, e queira dar semântica à ela. Tudo bem se eu fizer dessa forma? Existe uma maneira mais simples?
       
      Basicamente criei um cabeçalho para minha logomarca, de forma a dar importância e contexto para que o "robo" do Google, por exemplo, tenha mais facilidade em interpretar o "conteúdo" da minha imagem e conseguir catalogá-la adequadamente em seu motor de buscas. 
      span.td-visual-hidden { display: none; } <div class="td-header-logo"> <h1 class="td-logo"> <a href="#"> <img src="_images/defesa-evangelho.png" alt="Defesa do Evangelho" title="Defesa do Evangelho"/> <span class="td-visual-hidden">Defesa do evangelho</span> </a> </h1> </div> Desde já agradeço!
    • Por rodrigoalgeri
      BOA NOITE
      OLHA ISSO onde esta escrito isso aqui "Health star ratings Kellogg reveals the cereal Rodrigo Algeri", tem uma pequena imagem em cima se voce perceber ela e uma imagem redonda so que nao aparece inteira voce sabe algum jeito pra aparecer ? tipo ela tem que ficar 75px altura e largura a altura fica, so que ela corta, EU GOSTARIA QUE FICASSE UM QUADRADO TIPO 75PX X
      75PX E ISSO E PRA FICAR EM TODAS ESSAS IMAGENS AI QUE TEM 

    • Por isaque_cb2
      Olá galera, eu estou trabalhando em um site pessoal, mais para aprendizado mesmo, mas me deparei com um erro, quando eu abro o site no navegador (PC) funciona normal, mas quando abro no celular, a imagem dica pequena e no topo, alguém pode me ajudar com isso?
      print 1: (modo mobile do inspecionar)

      no PC fica normal, repare a área cinza abaixo da imagem, toda essa área devia ser coberta pela imagem, grato!
      http://prntscr.com/mvj3ed
       
      Grato desde já!
    • Por douglasbergamo
      Tenho instalado o wampserver na unidade C: da maquina e o fileserver esta na unidade D: como faço para ler estas imagens para carregar no browser?
×

Informação importante

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