js复制图片文字图文分享到微信/QQ，插件clipboard.js的应用案例

js复制图片-文字，可用于商品复制文案进行分享的功能~

1.此案例应用到clipboard.js，具体使用可查阅文档；

2.这个框架功能还是比较强大的，复制文本和图片，复制成功后的html的标签会被去除掉，即得到只有文字和图片等等，这样我们就可以用于分享到qq/微信了，某宝相关平台就用到此类似的功能…

3.微信/QQ对淘宝图片路径是有限制的，用图片：一定要http开头的地址（非淘宝地址），才能复制到微信/QQ，若要用淘宝图片，要先把图片放到自己的服务器上，或者你调某宝相关平台的接口时会有参数（推广图）返回的。

类似某宝平台的接口： （亲测～～）

1. 有推广图参数，可复制到微信和QQ（有图文）；
2. 推广图参数为空（主图代替），可复制到微信（有图文），QQ（没图，有文字）；

案例展示：

复制成功后：

案例代码：（我用的是淘宝图，所以会被屏蔽的，所以自行换图测试。）

<section class="the-container">
    <ul class="goods-list">
        <li class="item">
            <div class="copy-area">
                <div class="g-text">
                    <img src="http://img1.3lian.com/2015/a2/31/d/35.jpg">
                    <br>【销量冠军】隔离美白防晒霜喷雾<br>券后【8元】包邮秒杀<br>
                    50元优惠券:<a target="_blank" href="https://uland.taobao.com/quan/detail?sellerId=2464179042">https://uland.taobao.com/quan/detail?sellerId=2464179042</a>
                    <br>下单链接:
                    <a target="_blank" href="https://detail.tmall.com/item.htm?id=589481771410">
                        https://detail.tmall.com/item.htm?id=589481771410</a>
                    <br>【超级秒杀价！上百万+销量，抖音网红推荐】符合多种肤质，轻松变网红！一款能同时满足防晒+补水+保湿+美白提亮+定妆的喷雾，只需一分钟，做精致的猪猪女孩~
                </div>
            </div>
            <button type="button" class="copy-btn jsCopyBtn">复制文案</button>
        </li>
        <li class="item">
            <div class="copy-area">
                <div class="g-text">
                    <img src="http://img1.3lian.com/2015/a2/31/d/36.jpg">
                    <br>【蕉下】莲町防晒小黑伞晴雨伞<br>
                    券后【159元】包邮秒杀<a target="_blank" href="https://uland.taobao.com/quan/detail">https://uland.taobao.com/quan/detail</a>
                    <br>50元优惠券:
                    <a target="_blank" href="https://detail.tmall.com/item.htm?id">
                        https://detail.tmall.com/item.htm?id</a>
                    <br>【前100名，买一送一】伞界TOP1品牌~双层伞布、晴雨两用，升级L.R.C防晒涂层，阻隔99%紫外线、手工缝制，多种花色随心配，定义时尚生活新美学！【赠运费险】
                </div>
            </div>
            <button type="button" class="copy-btn jsCopyBtn">复制文案</button>
        </li>
    </ul>
</section>

<script src="clipboard.min.js"></script>
<script>
    //复制商品的文案（图文)
    const copyImgText = {
        domList : document.querySelectorAll('.jsCopyBtn'),
        getContent(dom){
            function clickFn(){
                var copyText = dom.parentNode.firstElementChild.firstElementChild, //复制内容 .g-text里面的
                    copyBtnName = '.' + dom.parentNode.lastElementChild.classList[1];//复制按钮的类名 .jsCopyBtn
                var clipboard = new ClipboardJS(copyBtnName ,{
                    target:function(){
                        return copyText
                    }
                })
                clipboard.on('success', function(e) {
                    // console.log(e);
                    console.log('已复制')
                    clipboard.destroy();
                });
                clipboard.on('error', function(e) {
                    console.log('复制失败，请稍后重试')
                });
            }
            function overFn() {
                dom.innerHTML = '点击复制';
            }
            function outFn() {
                dom.innerHTML = '复制文案';
            }
            dom.addEventListener('click',clickFn,false);
            dom.addEventListener('mouseover',overFn,false);
            dom.addEventListener('mouseout',outFn,false);
        },
        copy(){
            this.domList.forEach((dom)=>{
                this.getContent(dom);
        })
        }
    }
    copyImgText.copy();
</script>

源码会持续更新到公众号，需要可以关注一下哦…