文章/答案/技术大牛

发布

社区首页 >问答首页 >在图像上复制图像位置单击

问在图像上复制图像位置单击
EN

Stack Overflow用户

提问于 2020-03-04 18:36:14

回答 5查看 62关注 0票数 0

我有下面的代码可以很好的工作

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

我的问题是，当你点击其中一个笑脸符号时，我该如何添加位置，它会将图片位置复制到你的剪贴板上，这样，当用户只需将url粘贴到chatbox中，而不需要右键单击图片，然后复制图片位置时，它就会通过点击图片来为你复制图片位置。任何帮助都是最好的

javascript

html

css

回答 5

Stack Overflow用户

回答已采纳

发布于 2020-03-04 18:42:30

这将把image.src复制到剪贴板上(希望这就是你要找的)

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>

票数 3

Stack Overflow用户

发布于 2020-03-04 18:49:07

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

票数 0

Stack Overflow用户

发布于 2020-03-04 19:04:55

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60524111

复制

相似问题

问在图像上复制图像位置单击
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在图像上复制图像位置单击EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在图像上复制图像位置单击
EN