美文网首页
js实现复制图片到微信

js实现复制图片到微信

作者: 每天进步一点点5454 | 来源:发表于2024-06-02 16:58 被阅读0次
    image.png

    复制代码即可实现

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>获取企业微信客服</title>
        <link rel="stylesheet" type="text/css" href="https://cdn.zhangqiaokeyan.com/css/common.css?v=5.7.8">
    </head>
    <style>
        .wechat {
            width: 1000px;
            margin: 0 auto;
            font-size: 35px;
    
        }
    
        .wechat ul li {
            width: 100%;
            height: 150px;
            border-radius: 10px;
            background: #dde7fb;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10%;
        }
    
        .wechat ul li span {
            display: inline-block;
            width: 48%;
            height: 80px;
            background: #eee;
            border-radius: 10px;
            line-height: 80px;
            text-align: center;
        }
    </style>
    
    <body>
        <div class="wechat">
            <ul>
                <li>111<span onclick="copyHandle(1)">复制企微二维码</span>
                    <img id="img1" src="https://wework.qpic.cn/wwpic3az/977430_xJvIB4zkQnuJ0L4_1702273922/0" alt="1"
                        style="opacity: 0; display: none;">
                </li>
                <li>2<span onclick="copyHandle(2)">复制企微二维码</span>
                    <img id="img2" src="https://wework.qpic.cn/wwpic3az/977430_xJvIB4zkQnuJ0L4_1702273922/0" alt="2"
                        style="opacity: 0; display: none;">
                </li>
                <li>3<span onclick="copyHandle(3)">复制企微二维码</span>
                    <img id="img3" src="https://wework.qpic.cn/wwpic3az/977430_xJvIB4zkQnuJ0L4_1702273922/0"
                        alt="3" style="opacity: 0; display: none;">
                </li>
                <li>4<span onclick="copyHandle(4)">复制企微二维码</span>
                    <img id="img4" src="https://wework.qpic.cn/wwpic3az/977430_xJvIB4zkQnuJ0L4_1702273922/0" alt="4"
                        style="opacity: 0; display: none;">
                </li>
                <li>5<span onclick="copyHandle(5)">复制企微二维码</span>
                    <img id="img5" src="https://wework.qpic.cn/wwpic3az/977430_xJvIB4zkQnuJ0L4_1702273922/0"
                        alt="5" style="opacity: 0; display: none;">
                </li>
            </ul>
        </div>
    
        <script type="text/javascript" src="https://cdn.zhangqiaokeyan.com/js/jquery-1.12.4.js"></script>
        <script>
    
    
            // 复制图片,支持jpg,png
            function copyHandle(num) {
                let oImg = document.getElementById('img' + num)
                let url = oImg.src;
                var canvas = document.createElement('canvas') // 创建一个画板
                let image = new Image()
                image.setAttribute("crossOrigin", 'Anonymous') //可能会有跨越问题
                image.src = url
                image.onload = () => {  // img加载完成事件
                    canvas.width = image.width  //设置画板宽度
                    canvas.height = image.height //设置画板高度
                    canvas.getContext('2d').drawImage(image, 0, 0); //加载img到画板
                    let url = canvas.toDataURL("image/png") // 转换图片为dataURL,格式为png
                    this.clipboardImg(url) // 调用复制方法
                }
            }
    
            // 从url下载并复制图片,如果是png格式的图片直接调用此方法就能复制成功
            async function clipboardImg(url) {
                try {
                    const data = await fetch(url);
                    const blob = await data.blob();
                    await navigator.clipboard.write([
                        new window.ClipboardItem({
                            [blob.type]: blob
                        })
    
                    ]);
                    alert('复制成功')
                } catch (err) {
                    alert('复制失败')
                }
            }
    
        </script>
    </body>
    
    </html>
    

    相关文章

      网友评论

          本文标题:js实现复制图片到微信

          本文链接:https://www.haomeiwen.com/subject/svjsqjtx.html