首页 javascript

jquery qrcode 实现微信长按识别二维码功能

发布时间:2017年11月08日评论数：抢沙发阅读数：4370

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery实现微信长按识别二维码功能</title>
    <script src="./jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="jquery.qrcode.min.js"></script>
</head>
<body>

    <!--canvas中的二维码-->
    <div id="qrDiv" style="display: none;"></div>
    <!--image形式的二维码-->
    <div id="imgDiv"></div>

<script>

    $(function(){

        //利用插件生成二维码,生成的二维码在canvas中
        $('#qrDiv').qrcode({
            width: 120,
            height:120,
            text: "https://www.baidu.com/"
        });

        //从canvas中提取图片image
        function convertCanvasToImage(canvas) {
            //新Image对象，可以理解为DOM
            var image = new Image();
            // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
            // 指定格式PNG
            image.src = canvas.toDataURL("image/png");
            return image;
        }

        //获取网页中的canvas对象
        var mycanvas1=document.getElementsByTagName('canvas')[0];

        //将转换后的img标签插入到html中
        var img = convertCanvasToImage(mycanvas1);
        $('#imgDiv').append(img);//imgDiv表示你要插入的容器id
    })

</script>
</body>
</html>