CODEWITHSUNDEEP
javascripthtmlcss
user11745898
user11745898

Reputation:

Copy image location on image click

I have the following code works great

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

My Question how would i go about adding where when you click on one of the smileys it copies the image location to your clipbord so when users just have to paste the url into the chatbox without the need to right click the image and then do copy image location it would copy for you by clicking on the image. Any Help would be great

Upvotes: 0

Views: 754

Answers (5)

Gurpreet Singh
Gurpreet Singh

Reputation: 30

 $("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>

Upvotes: 0

user9643348
user9643348

Reputation:

Here is a snippet on which you click the image and it copies the URL to your clipboard:

function copy(x) {
  var y = document.getElementById(x);
  y.select();
  y.setSelectionRange(0, 99999); // for mobiles
  document.execCommand("copy");
}
<img src="https://televistar.com/media/u_media/stack.png" onclick="copy('image1')" />
<input type="text" value="https://televistar.com/media/u_media/stack.png" id="image1" style="opacity:0" />

Upvotes: 0

Alexander Flink
Alexander Flink

Reputation: 9

Since document.execCommand is an obsolete feature, you might want to future proof it by using navigator.clipboard instead. It is not yet implemented in Safari, but you could combine the two like so:

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()
  }
}

    <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"
            onclick="copy(this.src)"
          />
        </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"
            onclick="copy(this.src)"
          />
        </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"
            onclick="copy(this.src)"
          />
        </div>
      </div>
    </body>

Upvotes: 0

Md. Adil Hasan
Md. Adil Hasan

Reputation: 81

$('img').on('click', function () {
    let imgLoc = $(this).attr('src');
    imgLoc.select();
    document.execCommand("copy");
});

Upvotes: 0

Yosef Tukachinsky
Yosef Tukachinsky

Reputation: 5895

This will copy the image.src to the clipboard (hopefully it is what you looking for)

function copy(txt) {
  var input = document.createElement('input');
  input.value = txt;
  document.body.append(input);
  input.select();
  document.execCommand('copy');
  input.remove();
}
I have the following code works great

<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" onclick="copy(this.src)"/>
       </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" onclick="copy(this.src)"/>
       </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" onclick="copy(this.src)"/>
       </div>

</div>
</body>

Upvotes: 3

Related Questions