zoukankan      html  css  js  c++  java
  • 关于clipboard.js复制图片以及文本的随笔

    做了一个商场的复制文本以及图片的功能,网上找到了clipboard.js,试了会发现有些图片不能复制到后面尝试了多次,最后得到的结果就是服务器的路径不能过长(还有图片地址允许复制处理)比如:

    1、https://img.alicdn.com/imgextra/i2/2378443470/TB2OzgWvNGYBuNjy0FnXXX5lpXa_!!2378443470.jpg(不行);
    2、/goodsimg/2018606/152826962440080876.jpg(可行);

    具体文档可去官方查看,下面附上我自己写的代码,急用的话可看下。

    <!DOCTYPE html>
    <html>
    <head>
         <meta charset="UTF-8">
         <title></title>
          <link rel="stylesheet" type="text/css" href="layui/css/modules/layer/default/layer.css"/>
    </head>
    <body>
           <span class="fq-copy">
               复制
           </span>

          <span class="layui-layer-content" id="a1">
               <img class='' src='/goodsimg/2018606/152826962440080876.jpg'>
              <br/>描述文字~
         </span>

    <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/clipboard.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    function _copy(anniu,content){
        var clipboard = new Clipboard(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>

    //jq过滤复制内容的方法

            $(function() {
                var clipboard = new Clipboard('#clickcopy',{
                    // 通过target指定要复印的节点
                    target: function(trigger) {
    //                  var $foo = $(trigger).prev(".foo").clone();
                        
                            var $foo =$('.editbox').clone();
                        
                        $(trigger).after($foo);
                        var $imgs = $(trigger).next(".editbox").find("img")
                        $imgs.each(function(){
                            $(this).after($(this).data("emoji"));
                            $(this).remove();
                        });
                        return $(trigger).next(".editbox")[0];
                    }
                });
    
                clipboard.on('success', function(e) {
                    alert("成功");
                    $(e.trigger).next(".editbox").remove();
                    e.clearSelection();
                });
                clipboard.on('error', function(e) {
                    alert("复制失败!本产品只兼容到Chrome 42+、Firefox 41+、IE 9+、Opera 29+,请您换一个最新浏览器。")
                });
            });
  • 相关阅读:
    安装SQL sever2008时显示重新启动计算机规则失败,应该怎么解决?
    C#获取当前日期时间(转)
    使用JQUERY实现页面局部刷新
    Metal渲染:实现画面比例功能
    Metal渲染:实现旋转/翻转功能
    依赖注入浅析
    iOS 消息推送实现 APNS
    使用#pragma阻止一些warnings
    github 多帐户使用
    Swift 实现Bitmask Option(Enum)
  • 原文地址:https://www.cnblogs.com/xiaobaicai123/p/9156220.html
Copyright © 2011-2022 走看看