Question

我的目标是将图像复制到剪贴板。鉴于安全原因不允许复制图像，我想解决的用例是：

用户按下复制按钮
通过jquery选择图像（焦点和选择）
提示用户按ctrl + c复制图片

问题在于，如果我为输入执行此操作，我可以轻松选择其中的文本，但我无法为图像执行此操作。下面是我想要做的抽象版本，主要是暂时选择图像。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#myImage").focus();
    $("#myImage").select();
});
</script>
</head>
<body>
 <img id="myImage" width="220" height="277" src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="The Scream">
</body>
</html>

以下是相同的示例，但对于输入而言，它可以正常工作。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#myInput").focus();
    $("#myInput").select();
});
</script>
</head>
<body>
 
<input id="myInput" value="hello"/>
</body>
</html>

如果有人能给我正确的做法，我们将不胜感激。感谢。

Answer 1

我使用clipboard.js来解决我的问题，并找到了一种只需一个按钮即可将图像复制到剪贴板的方法。以下是我的解决方案。

请注意，在您下载cliboardjs之前它将无效。

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <script src="clipboard.min.js"></script>
  <title></title>
</head>
<body>

  <div id="myDiv">

    <img width="220" height="277" src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="The Scream">

  </div>
  <button class="btn" data-clipboard-target="#myDiv">
    Copy to clipboard
  </button>
  <script type="text/javascript">

    var clipboard = new Clipboard('.btn');

    clipboard.on('success', function(e) {
      e.clearSelection();
    });

  </script>
</body>
</html>

＆＃13;

Answer 2

$(document).ready(function(){
    $("#myImage").bind('load', function(){
        $("#myImage").focus();
        $("#myImage").select();
        alert("ok");
    });
});

你还应该检查一下：jQuery callback on image load (even when the image is cached)

jquery选择图像不工作

2 个答案: