Скопировать местоположение изображения по клику - PullRequest
Новая
       0

Скопировать местоположение изображения по клику

0 голосов
/ 04 марта 2020

У меня следующий код прекрасно работает 

<style>
.imgContainer{
    float:left;
}
</style>
<body>

<div class="image123">
        <div class="imgContainer">
        <img src="https://cdn4.iconfinder.com/data/icons/emoji-2-5/64/_quistion_emoji_smiley-64.png" height="64" width="64"/>
       </div>    
       <div class="imgContainer">
        <img src="https://cdn4.iconfinder.com/data/icons/emoji-2-5/64/_quistion_emoji_smiley-64.png" height="64" width="64"/>
       </div>
           <div class="imgContainer">
        <img src="https://cdn4.iconfinder.com/data/icons/emoji-2-5/64/_quistion_emoji_smiley-64.png" height="64" width="64"/>
       </div>

</div>
</body>

Мой вопрос, как бы я go добавил, где, когда вы нажимаете на один из смайликов, он копирует местоположение изображения в ваш клипборд, так что когда пользователи просто Нужно вставить URL-адрес в окно чата без необходимости щелкнуть правой кнопкой мыши изображение, а затем скопировать местоположение изображения, которое он скопирует для вас, нажав на изображение. Любая помощь будет великолепна

Ответы [ 5 ]

3 голосов
/ 04 марта 2020

Это скопирует image.src в буфер обмена (надеюсь, это то, что вы ищете) 

function copy(txt) {
  var input = document.createElement('input');
  input.value = txt;
  document.body.append(input);
  input.select();
  document.execCommand('copy');
  input.remove();
}
image
0 голосов
/ 04 марта 2020 

 $("img").on("click", function() {
      alert(this.src);

      var el = document.createElement("textarea");

      el.value = this.src;
      el.setAttribute("readonly", "");
      el.style = { position: "absolute", left: "-9999px" };
      document.body.appendChild(el);
      el.select();
      document.execCommand("copy");
      document.body.removeChild(el);
      copyStringToClipboard("abc123");
      document.execCommand("copy");
    });
        
      
.imgContainer {
        float: left;
      }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image123">
      <div class="imgContainer">
        <img
          src="https://cdn4.iconfinder.com/data/icons/emoji-2-5/64/_quistion_emoji_smiley-64.png"
          height="64"
          width="64"
        />
      </div>
      <div class="imgContainer">
        <img
          src="https://cdn4.iconfinder.com/data/icons/emoji-2-5/64/_quistion_emoji_smiley-64.png"
          height="64"
          width="64"
        />
      </div>
      <div class="imgContainer">
        <img
          src="https://cdn4.iconfinder.com/data/icons/emoji-2-5/64/_quistion_emoji_smiley-64.png"
          height="64"
          width="64"
        />
      </div>
0 голосов
/ 04 марта 2020

Вот фрагмент, на котором вы щелкаете изображение, и он копирует URL в ваш буфер обмена: 

function copy(x) {
  var y = document.getElementById(x);
  y.select();
  y.setSelectionRange(0, 99999); // for mobiles
  document.execCommand("copy");
}
image
0 голосов
/ 04 марта 2020

Поскольку document.execCommand является устаревшей функцией, вы можете использовать ее в будущем, используя navigator.clipboard. Это еще не реализовано в Safari, но вы можете объединить их так: 

function copy(src) {
  if (navigator.clipboard) {
    navigator.clipboard
      .writeText(src)
      .then(function() {
        // clipboard set
        console.log('success')
      })
      .catch(function(err) {
        // clipboard failure
        console.log(err)
      })
  } else {
    var input = document.createElement('input')
    input.value = src
    document.body.append(input)
    input.select()
    document.execCommand('copy')
    input.remove()
  }
}
image
0 голосов
/ 04 марта 2020 
$('img').on('click', function () {
    let imgLoc = $(this).attr('src');
    imgLoc.select();
    document.execCommand("copy");
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...