jquery 生成二维码并嵌入图片

最新推荐文章于 2024-09-26 17:08:03 发布

somdip

最新推荐文章于 2024-09-26 17:08:03 发布

阅读量2.3k

点赞数

分类专栏：编程文章标签： jq二维码

本文链接：https://blog.csdn.net/somdip/article/details/85068720

版权

编程专栏收录该内容

160 篇文章 0 订阅

订阅专栏

本文介绍如何在手机Web页面中使用jQuery生成二维码，并将其整合到图片上，实现自动截图功能，适用于业务推广需求。文章详细展示了HTML、CSS及JS代码配置，包括二维码生成、图片叠加与自动截图的实现过程。

摘要由CSDN通过智能技术生成

用到的js 库 jquery-3.3.1.min.js jquery.qrcode.min.js html2canvas.js

(百度云链接：https://pan.baidu.com/s/1Jh8L0tS6UuvRvOgUIUVx4w 提取码：qmpo，永久有效！）

上html源码（如下）：只需新建一个html ，你就可以看如（图一）的效果。进入页面直接截图并展示。

<!DOCTYPE html>
<!--<html lang="en">-->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta charset="UTF-8">
    <title>淘淘金融</title>
</head>
<style>
    body{
        margin: 0px;
    }
</style>
<body>
<td style="position:relative;padding: 0px" id="td" >
    <div>
        <div id="box" hidden   style="position:absolute; z-index:1; height: 100px;width: 100px;padding: 0px"   ></div>
        <img id="short" style="position:absolute; z-index:1; height: 100%;width: 100%"  src="/img/re_code.jpg" />
    </div>

    <div style="position:absolute;top:22.3%; left:37.3%; z-index:3"   class="code" id="code"></div>
</td>
</body>
<script src="/js/jquery-3.3.1.min.js"></script>·
<script src="/js/jquery.qrcode.min.js"></script>
<script  src="/js/html2canvas.js"></script>
<script>
    var url = "/reCode/getReCodeUrl";
    $.ajax({
        type: "post",
        url: url,
        data: {},
        success: function (data, text) {
            var code = data.code;
            if (code == 200) {
                showReCode(data.info);
               shortPig();
            } else {
                alert(data.msg);
            }
        },
        error: function (data, status, e) {
        },
        complete: function (XMLHttpRequest, status) { //请求完成后最终执行参数
        }
    });
    function showReCode(obj) {
        /*
       * 任意字符串 生成二维码  默认使用Canvas画图
       * */
           /* alert($(window).height());
            alert($(window).width());*/
            var h1 = 528;//p10
            var w1 = 360;//p10
            var h = $(window).height();
            var w = $(window).width();
            var hh1 = h/h1;
            var ww1 = w/w1;
            var hw = h/w;
            $('#code').qrcode({
                render: 'canvas',
                width: 100*ww1,
                height: 100*hh1,
/*
                width: 110*hh1,
                height: 100*ww1,
*/
                text: obj.url
            });
    }

//     $('#code').qrcode('http://blog.csdn.net/u011127019');
    /**
     * 触发截图
     */
    function shortPig(){

        html2canvas(document.body).then(function (canvas) {
            var dataUrl = canvas.toDataURL();
            var newImg = document.createElement("img");
            newImg.src = dataUrl;
            newImg.height =  $(window).height();
            newImg.width = $(window).width();
            /*newImg.height = 550;
            newImg.width = 340;*/
            $("img").hide();
            $("#code").hide();
            $("#box").show();
            $("#box").html(newImg);
        });

    }


</script>


</html>

（图一）