How to get the "src" value of an "img" tag through Javascript and copy it to clipboard?

Navigation
4

I want to make when when clicking on an image, your url is copied to the clipboard, I tried to use Clipboard but I was only able to copy the text. 

var a = document.getElementById('id' + img).src.toString();
alert(a);

I want to do this but without the user having to press ctrl c, I want the value to be copied when the user clicks on the img that calls this function.

function getsrc (img) {    var a = document.getElementById ('id' + img) .src.toString ();    window.prompt ("Copy to clipboard: Ctrl + C and press Enter", a); }

Value shown in the alert: link . This value should go to the transfer area, ctrl + v should be pasted.

With this code the path I want to go to the clipboard appears, but I can not copy it to the clipboard automatically when a img is clicked.

    
asked by anonymous 02.03.2016 / 17:49

4 answers

3

You can use the clipboard.js library, click here to view your documentation .

Solution using clipboard.js : 

// Inicia o Clipboard no elemento "button"
var copiar = new Clipboard('button', {

    // Define o texto a ser copiado
    text: function(trigger) {

        // Obtem "src" da "img" que está no mesmo nível do "button"        
        return $(trigger).siblings('img').attr('src');
    }


});

// Retorna um alert se copiar com sucesso.
copiar.on('success', function(e) {
   alert('Copiado para a area de transferencia!');
});

// Retorna um alert se copiar com erro.
copiar.on('error', function(e) {
   alert('Houve um erro ou navegador não suportado');
});
<!-- CSS do Bootstrap, para ficar mais bonitinho :P -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!-- JS do Jquery e do Clipboard.js (NECESSÁRIO!) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>

<!-- Código com suas imagens! -->
<div class="col-xs-10 col-offset-2">
<div class="col-xs-5">
  <img src="https://pixabay.com/static/uploads/photo/2015/08/20/14/00/frog-897419_960_720.jpg"class="img-thumbnail" alt="Cinque Terre" width="100%">
  <button class="btn btn-block btn-primary">
   COPIAR
  </button>
</div>
<div class="col-xs-5">
  <img src="https://pixabay.com/static/uploads/photo/2015/08/20/14/00/frog-897418_960_720.jpg"class="img-thumbnail" alt="Cinque Terre" width="100%">
  <button class="btn btn-block btn-primary">
   COPIAR
  </button>
</div>
</div>

Other methods of use:

You can use clipboard.js in a number of other ways, not limited to the posted demo, to complement I'll be posting some examples, which are also contained in the documentation site

Copy value of input : 

// Inicia o Clipboard no "button"
new Clipboard('button');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="col-xs-10">
  <div class="col-xs-8">
      <!-- Alvo a ser copiado -->
      <input id="id" class="form-control" value="Digite algo, ou clique em Copiar para copiar isso!">
  </div>
  
   <div class="col-xs-2">
      <!-- Botão para copiar -->
      <button class="btn  btn-block" data-clipboard-target="#id">
           Copiar
      </button>
  </div>
</div>

In this case, data-clipboard-target="" is responsible for copying the value of another element, in this case input . So when clicking the user will copy the written content in the element defined in data-clipboard-target .

Copy pre-defined text in element: 

// Inicia o Clipboard no "button"
new Clipboard('button');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="col-xs-10">
  <button class="btn btn-block" data-clipboard-text="Você copiou esse texto :O">
      Copiar!
  </button>
</div>

In this case, data-clipboard-text="" is responsible for defining the text to be copied. So when clicking the user will copy the content written in the element data-clipboard-text .

Compatibility:

  

Official library support list: 

Chrome 42+
Mozilla 41+
Internet Explorer 9+
Opera 29+

License:

Images are under "Public Domain":

link
link

Clipboard.js is under "MIT License":

link

    
31.07.2016 / 02:18
2

Below an example made with pure Javascript . 

var reply_click = function()
{
    alert("Copiado para a área de transferência");
  
  //Criando um "hidden" input
  var aux = document.createElement("input");
  
  // Atribuir-lhe o valor do elemento especificado
  aux.setAttribute("value", this.src);

  // Anexá-lo ao corpo
  document.body.appendChild(aux);

  // Highlight conteúdo
  aux.select();

  // Copiando o highlighted text
  document.execCommand("copy");

  // Removendo do corpo
  document.body.removeChild(aux);
}
//imagem 1
document.getElementById('1').onclick = reply_click;
//imagem 2
document.getElementById('2').onclick = reply_click;


  
<img id="1" width="100" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/careers/careers-logo.png?v=c252e7f960b1"/><br/><br/><imgid="2" width="100" src="https://upload.wikimedia.org/wikipedia/commons/f/f7/Stack_Overflow_logo.png"/><br/><br/><inputtype="text" placeholder="Cole aqui após clicar na imagem acima" />
    
31.07.2016 / 03:28
-1

Using jquery should work like this: 

var imagem = $("#id-da-imagem").attr('src');
alert(imagem);
    
02.03.2016 / 18:06
-1

In this link has an example which I used and worked. Note: Using JQuery only. 

var src = $('img[alt="example"]').attr('src');
alert("caminho da imagem = " + src);
    
11.01.2017 / 20:49
How to avoid misuse of a REST API? Generate a random value in a track, excluding a track