關於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+,請您換一個最新瀏覽器。")
            });
        });

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM