二维码在微信中无法保存的解决办法

最新推荐文章于 2024-10-24 09:23:48 发布

执剑走天涯xp

最新推荐文章于 2024-10-24 09:23:48 发布

阅读量8.1k

点赞数

分类专栏： jquery 二维码

本文链接：https://blog.csdn.net/qq_41566366/article/details/108199726

版权

jquery 同时被 2 个专栏收录

3 篇文章

订阅专栏

二维码

1 篇文章

订阅专栏

项目场景：

项目场景：示例:通过jquery.qrcode生成二维码，并长按保存到相册

问题描述：

qrcode里面的代码是jquery.qrcode生成的，但是该默认的二维码无法长按保存，于是我尝试移除掉qrcode里默认的img然后添加新的img来实现，但是无论使用jquery的remove还是javascript的removeChild，在微信开发工具的确移除了，但是在微信浏览器中打开任然能看到默认的img

解决方案：

使用var qrcode = $("#qrcode").qrcode("https://baidu.com").hide()可以顺利移除默认二维码，然后在qrcode后面生成新的img就顺利解决了问题

代码：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.5.1.js"></script>
    <script src="./jquery.qrcode.min.js"></script>
</head>
<body>
    <div class="h-share">
        <a href="javascript:;" class="all fxqrcode">分享微信二维码</a>
    </div>

    <!--分享-->
    <div class="shareQrcode">
        <div class="shareShow">
            <i class="shareClose">×</i>
            <div id="qrcode"></div>
            <div id="qr_img"><img src='' alt=''/></div>
            <p>长按保存,分享二维码</p>
        </div>
    </div>

</body>
</html>

javascript

    <script>
        $(".shareClose").click(function(){
            $(".shareQrcode").hide();
        })

        $(".fxqrcode").click(function(){
            var qrcode = $("#qrcode").qrcode("https://baidu.com").hide();        //qrcode里边为扫描进入的地址
            var canvas = qrcode.find('canvas').get(0);
            //把canvas的二维码转换为图片
            $("#qr_img>img").attr("src",canvas.toDataURL('image/jpg')); 

            $(".shareQrcode").show();
        })
    </script>

css


    .h-share .all {
        background: #00a665;
    }
    .shareQrcode{
        width: 100%;
        height:100%;
        position: fixed;
        background: rgba(0,0,0,0.8);
        z-index: 999;
        left: 0;
        top: 0;
        display: none;
    }
    .shareQrcode .shareShow{
        width: 250px;
        height: 280px;
        background: #fff;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    .shareQrcode .shareShow i{
        position: absolute;
        right: 10px;
        top: 0px;
        font-size: 36px;
        font-weight: 100;
    }
    .shareQrcode .shareShow #qrcode{
        padding-top: 45px;
        padding-left: 35px;
    }
    .shareQrcode .shareShow p{
        font-size: 14px;
        text-align: center;
        color: #666;
        margin-top: -30px;
    }

    #qr_img {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #qr_img>img {
        width: 180px;
        height: 180px;
    }

jquery.qrcode.min.js下载地址:https://github.com/jeromeetienne/jquery-qrcode

参考：https://blog.csdn.net/qq_44235822/article/details/97624194