Sun. Oct 1st, 2023

[ANSWERED] javascript – Copy image location on image click

By

Nov 20, 2022 css, html, javascript

Solution 1 :

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>

Solution 2 :

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

Solution 3 :

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>

Solution 4 :

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

Solution 5 :

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

Problem :

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

Comments

Comment posted by developer.mozilla.org/en-US/docs/Web/API/Clipboard

developer.mozilla.org/en-US/docs/Web/API/Clipboard

By

Related Post

[ANSWERED] html – select all elements within a parent class

Nov 20, 2022

[ANSWERED] html – Hidden Div Text Reappears?

Nov 20, 2022

[ANSWERED] c# – InvalidCastException when reading mshtml.HTMLDocument.Script property

Nov 20, 2022