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+,请您换一个最新浏览器。")
                });
            });
  • 相关阅读:
    .net注册iis
    hdu 1081To The Max
    hdu 1312Red and Black
    hdu 1016Prime Ring Problem
    hdu 1159Common Subsequence
    hdu 1372Knight Moves
    hdu 1686Oulipo
    hdu 1241Oil Deposits
    hdu 1171Big Event in HDU
    hdu 4006The kth great number
  • 原文地址:https://www.cnblogs.com/xiaobaicai123/p/9156220.html
Copyright © 2011-2022 走看看