zoukankan      html  css  js  c++  java
  • 使用qrcode输入信息生成二维码包含二维码说明信息,点击转化为图片并下载

    说明:输入汉字和数字都可以识别并展示

    <body>
    <h2 id="h2">二维码生成</h2>
    <br>
    <span id="span"></span>
    <p id="p"></p>

    <br><br><br>
    <div style="margin:20px 0; 90%;height: 400px;margin: auto">
    <div class="easyui-panel" style="margin-top: 5px; height: 100%;border:hidden">
    名称:<input type="text" name="textbox1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 22px; line-height: 22px; 140.4px;"> 功能位号:
    <input type="text" name="textbox2" placeholder="普通输入框"> 资产号:
    <input type="text" name="textbox3" placeholder="普通输入框">
    <!-- 设备号:<input type="text" name="textbox4" placeholder="普通输入框"> -->

    <button type="button" onclick="print()">点击生成</button>

    </div>
    </div>
    </body>
    <script>

    function print() {
    var textbox1 = $('input[name="textbox1"]').val();
    var textbox2 = $('input[name="textbox2"]').val();
    var textbox3 = $('input[name="textbox3"]').val();
    if(!textbox1) {
    alert("待生成的页面不能为空");
    } else {
    var symHref = 'final.html?id=' + textbox1 + "?nsme=" + textbox2 + '?ns=' + textbox3;
    window.open(symHref);
    }

    }
    </script>

    //获取参数,生成二维码
    $(document).ready(function() {
    var str = window.location.href; //取得整个地址栏
    var num = str.indexOf("?")
    str = str.substr(num + 1);
    console.log(str); //id=1?nsme=2?ns=3
    str = str.split('?');
    console.log(str);
    var e = str[0].split('=');
    console.log(e);
    var e1 = str[1].split('=');
    var e2 = str[2].split('=');
    //var qwe = e[1];
    var qwe = decodeURI(e[1]);
    var qwe1 = decodeURI(e1[1]);
    var qwe2 = decodeURI(e2[1]);

    $("#code1").html(qwe);
    $("#code2").html(qwe1);
    $("#code3").html(qwe2);

    $("#qrcodeCanvas").qrcode({
    render: "canvas", //设置渲染方式,有table和canvas,使用canvas方式渲染性能相对来说比较好
    text: "编码1:" + qwe + " " + "编码2:" + qwe1 + " " + "编码3:" + qwe2, //扫描二维码后显示的内容,可以直接填一个网址,扫描二维码后自动跳向该链接
    "400", //二维码的宽度
    height: "400", //二维码的高度
    background: "#ffffff", //二维码的后景色
    foreground: "#000000", //二维码的前景色
    src: 'img/3.png' //二维码中间的图片
    });

    });

    //将二维码及说明信息生成图片并保存
    function printPhoto() {

    html2canvas(document.getElementById("imgBox"),{
    onrendered: function(canvas) {
    var imgURL = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

    var saveFile = function(data, filename){
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
    }

    saveFile(imgURL,'filename.png');

    }
    });

    }

    最后生成的图片就是这样的啦!!!

    源码下载地址:https://github.com/MrBaiYinL/qrcode

    如果觉得能帮助到你,麻烦动动手点一个star。

     下面是我的公众号,大家可以关注一下,可以一起学习,一起进步:

  • 相关阅读:
    1058 A+B in Hogwarts (20)
    1046 Shortest Distance (20)
    1061 Dating (20)
    1041 Be Unique (20)
    1015 Reversible Primes (20)(20 分)
    pat 1027 Colors in Mars (20)
    PAT 1008 Elevator (20)
    操作系统 死锁
    Ajax的get方式传值 避免& 与= 号
    让IE浏览器支持CSS3表现
  • 原文地址:https://www.cnblogs.com/lxl0419/p/9513043.html
Copyright © 2011-2022 走看看