Publicado em 13 de mai.

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

#javascript #imagem #canvas #colar #copiar

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?

Discussão (5)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Ericsson Berg· 13 de mai.

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>

KhaosDoctor· 14 de mai.

Eu aconselho você olhar alguma biblioteca como o Clipboard.js para fazer esse tipo de coisa

Ericsson Berg· 14 de mai.

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.

Raphael Leandro· 13 de jan.

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!!!!

lucasdaniel· 9 de out.

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