Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Ericsson Berg

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

Por , em Javascript

Recommended Posts

Ericsson Berg    2

Ericsson Berg
Postado

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

Ericsson Berg    2

Ericsson Berg
Postado

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

Ericsson Berg    2

Ericsson Berg
Postado

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

Raphael Leandro    0

Raphael Leandro
Postado
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

lucasdaniel    0

lucasdaniel
Postado

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
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • PresleyMenezes
      como copiar e colar conteúdo json
      Por PresleyMenezes
      Olá pessoal, gostaria de saber como copiar o conteúdo de um campo json com muitos pais e filhos e colar em outro campo de pais e filhos do mesmo arquivo json?
       
      agradeço a ajuda de vocês.
      em anexo o arquivo json e o codigo que estou tentando fazer

       

       

       
       
       
       

       

       
    • asacap1000
      inserir marca d'agua em um vídeo usando php
      Por asacap1000
      Galera salve salve!!
      Estou com um projeto em que são armazenados vídeos, porém seguindo os requisitos exigidos, para visualizar e baixar esses vídeos eles tem que aparecer com numero de cadastro do usuário que está acessando no centro do video como uma marca d'agua.
       
      Para simplesmente aparecer na tela eu consigo fazer uma camada superior com css e apresentar os dados do usuário mas para baixar o vídeo ele já faz sem a marca.
       
      Vocês conhecem algum recurso pra adicionar essa marca? ela não pode ficar no arquivo original pois outros usuário poderão baixar com sua identificação na tela.
       
      Se alguem puder me dar um norte ajudaria muito
    • LucasLV
      Cache de arquivos gerados com PHP
      Por LucasLV
      Olá.
      Tenho um site onde as imagens são geradas através de um arquivo PHP - utilizo esse método para retornar imagens webp ou jpg - e vi que o navegador não utiliza, ou não salva em cache, as imagens geradas dessa forma.
      Já as onde informo o caminho completo da imagem com a extensão, aparecem como utilizadas do cache.

      Esse comportamento é normal quando as imagens são geradas desse jeito ou é por não ter feito nenhuma configuração de cache no arquivo PHP que gera as imagens?
       
      Coloquei uma imagem do resultado exibido no navegador.

    • Wallcrawler
      Salvar uma imagem disponível em uma url SSL para uma pasta em meu projeto
      Por Wallcrawler
      Olá pessoal tudo bem? Estou tentando fazer a cópia de uma imagem que está disponível na web e salvar em uma pasta no meu projeto. Essa imagem está sob protocolo SSL mas navegador consegue acessá-la normalmente. Mas o meu script php é bloqueado, e não entendo o porquê.
       
      Segue o código que estou usando:
      <?php //error_reporting(E_ALL ^ E_DEPRECATED); //ini_set('display_errors', 1); //die('Script travado!'); $start = microtime(true); set_time_limit(0); function save_image($inPath,$outPath) { //Download images from remote server $in = fopen($inPath, 'rb'); $out = fopen($outPath, 'wb'); while ($chunk = fread($in,8192)) { fwrite($out, $chunk, 8192); } fclose($in); fclose($out); } include_once ($_SERVER['DOCUMENT_ROOT'] . '/grpi/include/classes/Rpi.class.php'); include_once ($_SERVER['DOCUMENT_ROOT'] . '/grpi/include/functions.class.php'); $func = new FuncoesAuxiliares(); $rpi = new Rpi(); if(!isset($_GET['num_processo'])) { $rows = $rpi->Consulta('select num_processo, classe, especificacao from processos order by num_processo ASC limit 1'); } else { $rows = $rpi->Consulta("select num_processo, classe, especificacao from processos where num_processo > '" . $_GET['num_processo'] . "' order by num_processo ASC limit 1"); } $registros = 0; $arrayInsert = array(); $qtd_caracteres_total = 14; foreach ($rows as $rs) { //$rs['num_processo'] $zeros = ''; $qtd_char_processo = strlen($rs['num_processo']); //Fill zeros for($i=0; $i < ($qtd_caracteres_total - $qtd_char_processo); $i++) { $zeros .= '0'; } echo('BR5' . $zeros . $rs['num_processo'] . '<br>'); $url = 'http://www.tmdn.org/tmview/trademark/image/BR5' . $zeros . $rs['num_processo']; //Aqui tento acessar a imagem e salvar na pasta correspondente save_image($url, __DIR__ .'/logo/' . $rs['num_processo'] . '.jpg'); //copy('https://www.tmdn.org/tmview/trademark/image/BR5' . $zeros . $rs['num_processo'], __DIR__ .'/logo/' . $rs['num_processo'] . '.jpg'); $processo = $rs['num_processo']; $registros++; } $registros = number_format($registros, 0, ',', '.'); // Display Script End time $time_end = microtime(true); //dividing with 60 will give the execution time in minutes other wise seconds $execution_time = ($time_end - $start)/60; //execution time of the script echo '<b>Total Execution Time:</b> '. $execution_time .' Mins <hr><br><br>Registros: ' . $registros . '<br><br>'; echo("<a href='down_logo.php?num_processo=" . $processo ."' target='_self'>Próxima página</a><br><br>"); ?> O erro retornado é o seguinte:
       
      Warning: fopen(): SSL: Connection reset by peer in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 10

      Warning: fopen(http://www.tmdn.org/tmview/trademark/image/BR500000825642590): failed to open stream: HTTP request failed! in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 10

      Warning: fread() expects parameter 1 to be resource, boolean given in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 12

      Warning: fclose() expects parameter 1 to be resource, boolean given in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 16
       
      Só que se você tentar acessar o endereço no browser, diretamente, a imagem aparece:
       
      https://www.tmdn.org/tmview/trademark/image/BR500000825642590 
       
      Onde posso estar errando? Obrigado pela atenção de todos.
×

Informação importante

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

  Aceito