JavaScript 复制图片

JS复制页面中的图片,原理是以html的方式复制到其他地方,不支持html解析的编辑器粘贴会有问题,类似qq这种可能会被禁止获取图片。

实际使用不如浏览器右键点击复制

使用js的复制框架实现

<html>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>  
<script type="text/javascript" src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>  
<script type="text/javascript">
$(function(){
    var clipboard = new ClipboardJS('.fq-copy', {
        target: function() {
            return document.querySelector('.layui-layer-content');
        }
    });
});
</script>
<body>
<span class="fq-copy">复制</span>
<span class="layui-layer-content">
<img src='https://www.baidu.com/img/bd_logo1.png?where=super' alt='' style='width:150px;'><br/>描述文字~!
</span>
<!-- 必须放在节点后面才能加载
<script type="text/javascript">
function _copy(anniu,content){
    var clipboard = new ClipboardJS(anniu, {
    target: function(e) {
        return document.querySelector(content);
    }
   });
     clipboard.on('success', function(e) {
          alert('复制成功!!');
          console.info('Action:', e.action);
          console.info('Text:', e.text);
          console.info('Trigger:', e.trigger);
          e.clearSelection();
    });
  clipboard.on('error', function(e) {
      alert('复制失败!')
      console.error('Action:', e.action);
      console.error('Trigger:', e.trigger);
  });
}
_copy('.fq-copy','.layui-layer-content');
</script>
-->
</body>
</html>
上一篇
下一篇