HTML网址生成二维码图片合成宣传图片示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>

    <!-- 引用css -->
    <link rel="stylesheet" type="text/css" href="css/style.css?y=1242343"/>
    <!-- 引用js -->
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/drag.js"></script>
    <script type="text/javascript" src="js/html2canvas.js"></script>
    <script type="text/javascript" src="js/jquery.qrcode.min.js"></script>

    <script>
        $(function () {

            $('.box-4 dl').each(function () {
                $(this).dragging({
                    move: 'both',
                    randomPosition: true
                });
            });
        });

    </script>

</head>
<body>
<div class="conetn">
    <div class='box box-4' id="box">
        <dl><img src="" style="z-index: -99;"></dl>
        <dl><div id = "qrid" style="z-index: 99;"></div></dl>
        <!--<dl><span>测试代码</span></dl>-->
        <!--<dl><span>测试代码123</span></dl>-->
    </div>

    <div class="fileBox">

        <div class="warp">
            <div class="warp-content">点击上传背景图片</div>
            <input type="file" id="file"/>
        </div>
        <p></p>
        <!--<img src="" style=" 100%;height: auto" />-->
    </div>

    <div class="txt">
        <br>

        <div>
            标题：<input class="Txttitle" type="text" maxlength="20" size="30"/><br><br>
            文字大小：   <input class="TxtSize" type="text" maxlength="20" size="30"/><br><br>
            字体：<select class="fontTxt">
                    <option value="Arial">Arial</option>
                    <option value="仿宋">仿宋</option>
                    <option value="微软雅黑">微软雅黑</option>
                    <option value="Helvetica">Helvetica</option>
                    <option value="audi" selected="selected" >Audi</option>
                </select>

            <span class="btn .Txttitle" style="margin: 5px 5px;" onclick="addTxt();">添加标题文字</span></div>
        <br>

        <div><input class="ewmInput" type="text" maxlength="60" size="60"/>

            <span class="btn" style="margin: 5px 5px;" onclick="ewmPT();">添加二维码</span></div>
        <br>

    </div>
</div>

<div style="padding:10px 0">
    <div class="btn" id="btn">截取屏幕</div>
    <p style="color:red; text-align:center;">先点击截取屏幕后再点击截图下载</p>
    <div style="margin-top:10px">
        <a href="javascript:;" rel="external nofollow" class="btn" id="download">截图下载</a>
    </div>
</div>

<script type="text/javascript">
    var txtID = 0;

    //设置dl标签为可拖动属性
    function rund(){
        $('.box-4 dl').each(function () {
            $(this).dragging({
                move: 'both',
                randomPosition: false
            });
        });
    }


//    添加标题文字至页面
    function addTxt(txt){
        txtID =txtID + 1;

        var txt_title = $('.Txttitle').val();
        var txt_size = $('.TxtSize').val();
        var txt_family = $('.fontTxt').val();

        var html = '<dl style="position: absolute; cursor: move; top: 0px; left: 0px; z-index: 0;"><span class="Txttitle_'+ txtID +'" onclick="onck(this)" style="font-size:'+ txt_size +'px;  font-family:'+ txt_family +';">'+ txt_title  +'</span></dl>';
        $(".box-4").append(html);
        $('.Txttitle').val("");
        $('.TxtSize').val("");
        rund();
    }

    //更新标题文字
    function updateTxt(_this){
        console.log($(_this).css('font-size'));
    }


    //上传图片设置
    var file = document.getElementById('file');
    var image = document.querySelector("img");
    file.onchange = function () {
        var fileData = this.files[0];//获取到一个FileList对象中的第一个文件( File 对象),是我们上传的文件，未见为电脑内存中图片 base64图片
        var pettern = /^image/;

        console.info(fileData.type)

        if (!pettern.test(fileData.type)) {
            alert("图片格式不正确");
            return;
        }
        var reader = new FileReader();
        reader.readAsDataURL(fileData);//异步读取文件内容，结果用data:url的字符串形式表示
        /*当读取操作成功完成时调用*/
        reader.onload = function (e) {
            console.log(e); //查看对象
            console.log(this.result);//要的数据 这里的this指向FileReader（）对象的实例reader
            image.setAttribute("src", this.result)
        }
    }

    //点击获取标题文字值
    function onck(_this){
        console.log($(_this).html());
        var txt = $(_this).html()
        $('.Txttitle').val(txt);
        updateTxt(_this);

    }

    //插入二维码至页面，并下载
    $("#btn").click(function(){
        html2canvas($("#box"), {
            onrendered: function(canvas) {
                //把截取到的图片替换到a标签的路径下载
                $("#download").attr('href',canvas.toDataURL());
                //下载下来的图片名字
                $("#download").attr('download','share.png') ;
                document.body.appendChild(canvas);
            }
//可以带上宽高截取你所需要的部分内容
//     ,
//      300,
//     height: 300
        });
    });

    //生成二维码
    function ewmPT(){
        var qrstr = $('.ewmInput').val();
//        $('#qrid').qrcode(qrstr);//不指定二维码大小
        $('#qrid').qrcode({ 65,height: 65,text: qrstr});//指定二维码大小
    }
</script>
</body>
</html>

======================================css（其实没啥用）================
body, dl, dt, dd, ul, ul li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, button {
    -webkit-font-smoothing: antialiased;
    padding: 0;
    margin: 0;
    font-family: "Microsoft Yahei", "微软雅黑", Arial, Helvetica, sans-serif;
    font-size: 12px;
}

img, input, select, textarea, button, object {
    vertical-align: middle;
}

html {
    _overflow-x: hidden;
    font-size: 62.5%;
    /*overflow: hidden;*/
    /*一般的，各大主流浏览器的font-size默认值为16px,此时1rem=16px。如果此时将rem与px进行换算很麻烦，比如0.75rem=12px。 为了更方便的进行换算（比如1：10），就可以加样式：*/
}

html, body {
    margin: 0 auto;
     100%;
    left: 0;
    top: 0;
    padding: 0;
    /*overflow: hidden;*/
    _overflow-x: hidden;
    box-sizing: border-box;
}

img {
    border: 0;
     100%;
    height: 100%;
}

table {
    border-collapse: collapse
}

ul, ul li {
    list-style: none;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

dt, dd {
    list-style: none;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

hr {
    height: 1px;
    border: none;
    border-top: 1px dotted #ccc;
    overflow: hidden
}

hr.c2 {
    border: 0px;
    border-top: 2px solid #ddd;
}

hr.dashed {
    border-top: 1px dashed #e4e4e4
}

.clear {
    clear: both;
    line-height: 0;
    font-size: 0;
    height: 0
}

.clearfix:after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    content: "."
}

input{
    border: 1px solid #ccc;
    padding: 7px 0px;
    border-radius: 3px;
    padding-left:5px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}
input:focus{
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}

span{
    font-family: 仿宋;
    font-size: 12px;/*设置字体的大小*/
    font-style: italic;/*斜体*/
    font-weight: bold;/*加粗*/
    background: #ff7956;
}

* {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

li {
    list-style: none outside none;
}

body {
     100%;
    background: url(../images/rbg.jpg) repeat scroll 0 0 #aaa;
    font-family: "宋体";
    padding: 50px 0 300px;

}

.conetn{
     100%;
    height:auto;
}

.box {
    max- 320px;
    max-height: 568px;
     320px;
    /*height: 568px;*/
    height: 800px;
    margin: 0 auto ;
    background: #3bb3e0;
    border: 1px solid #2561b4;
}
.box img{
     100%;
    height: auto;
}

p {
    font-size: 20px;
    color: #333;
    text-align: center;
    margin: 0 0 20px;
}

.box.box-1 {
    height: 200px
}

.box-1 dl {
    /*top: 25px;*/
}

.box.box-2 {
    height: 500px
}

.box-2 dl {
    left: 50%;
    margin-left: -75px;
}

i.hander {
    display: block;
     100%;
    height: 25px;
    background: #ccc;
    text-align: center;
    font-size: 12px;
    color: #333;
    line-height: 25px;
    font-style: normal;
}

.txt {
    position: relative;
    text-align: center;
}

/*按钮样式*/
.btn {
     100px;
    height: 30px;
    line-height: 30px;
    background: green;
    color: #fff;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    text-align:center;
    /*display: block;*/
    /*text-decoration: none;*/
    padding: 5px 5px;
}

/*上传按钮样式*/
.fileBox{
    margin: 0 auto;
    top: 10px;
    position: relative;
     320px;
}
.warp {
    display: inline-block;
    vertical-align: bottom;
    position: relative;

}

.warp-content {
    border: 1px solid red;
     100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.warp input {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid red;
     100px;
    height: 100px;
    opacity: 0;
    cursor: pointer;
}

img {
     300px;
    height: 300px;
    /*border: 1px solid red;*/
    /*margin-top: 50px;*/
    vertical-align: bottom;
}


【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/2019gdiceboy/p/14085611.html