zoukankan      html  css  js  c++  java
  • 前端JS生成二维码

    参考   http://code.ciaoca.com/javascript/qrcode/

    使用前先载入js文件        下载

    <script src="qrcode.js"></script>

    然后页面添加容器

    <div id="qrcode"></div>

    调用js文件中的方法

     1 // 简单方式
     2 new QRCode(document.getElementById('qrcode'), 'your content');
     3 // 设置参数方式
     4 var qrcode = new QRCode('qrcode', {
     5   text: 'your content',
     6    256,
     7   height: 256,
     8   colorDark : '#000000',
     9   colorLight : '#ffffff',
    10   correctLevel : QRCode.CorrectLevel.H
    11 });
    12 // 使用 
    13 APIqrcode.clear();
    14 qrcode.makeCode('new content');

    参数说明

    new QRCode(element, option)
    名称默认值说明
    element - 显示二维码的元素或该元素的 ID
    option   参数配置

    option参数

    名称默认值说明
    width 256 图像宽度
    height 256 图像高度
    typeNumber 4  
    colorDark "#000000" 前景色
    colorLight "#ffffff" 背景色
    correctLevel QRCode.CorrectLevel.L 容错级别,可设置为:

    QRCode.CorrectLevel.L

    QRCode.CorrectLevel.M

    QRCode.CorrectLevel.Q

    QRCode.CorrectLevel.H

    API接口

    名称说明
    makeCode(text) 设置二维码内容
    clear() 清除二维码。(仅在不支持 Canvas 的浏览器下有效)

    实例效果  demo

    js文件下载地址在本文开头

    下面直接贴代码

      1 <script src="~/Content/QRCode/qrcode.min.js"></script>
      2 
      3 <div class="qrCode">
      4     <div class="configure">
      5         <div class="inputUrl">
      6             <span style="display:block;height:40px;line-height:40px;float:left;">输入地址:</span>
      7             <input type="text" id="text" value="http://www.baidu.com" />
      8         </div>
      9         <div class="inputUrl">
     10             <span style="display:block;height:40px;line-height:40px;float:left;">图片大小:</span>
     11             <select class="qrSize">
     12                 <option value="100">100 X 100</option>
     13                 <option value="150">150 X 150</option>
     14                 <option value="200">200 X 200</option>
     15                 <option value="300">300 X 300</option>
     16             </select>
     17         </div>
     18         <div class="inputUrl">
     19             <span style="display:block;height:40px;line-height:40px;float:left;">背景颜色:</span>
     20             <input type="text" readonly value="#ffffff" id="qrBGC" />
     21             <div id="test2" style="height:40px;line-height:40px;40px;"></div>
     22         </div>
     23         <div class="inputUrl">
     24             <span style="display:block;height:40px;line-height:40px;float:left;">前景颜色:</span>
     25             <input type="text" readonly value="#000000" id="qrFGC" />
     26             <div id="test3" style="height:40px;line-height:40px;40px;"></div>
     27         </div>
     28         <div class="inputUrl">
     29             <a class="layui-btn createQRBtn">生成二维码</a>
     30         </div>
     31         <div class="inputUrl">
     32             <a class="layui-btn downloadQRBtn">下载图片</a>
     33         </div>
     34     </div>
     35     <div id="qrcode">这里将生成二维码图片!</div>
     36     <div style="clear:both;"></div>
     37 </div>
     38 <style type="text/css">
     39     .qrCode {
     40          100%;
     41         height: auto;
     42         min-height: 500px;
     43         margin-left: auto;
     44         margin-right: auto;
     45         margin-top: 20px;
     46         box-shadow: blue 0px 0px 10px 0px;
     47         padding: 30px;
     48         border-radius: 8px;
     49         white;
     50     }
     51 
     52     .configure {
     53         max- 400px;
     54          auto;
     55         height: auto;
     56         min-height: 300px;
     57         float: left;
     58         display: inline-block;
     59     }
     60 
     61     .inputUrl {
     62         float: left;
     63         height: 40px;
     64         margin-bottom: 15px;
     65         display: inline-block;
     66          100%;
     67     }
     68 
     69         .inputUrl a {
     70             text-decoration: none;
     71         }
     72 
     73     #text {
     74         height: 40px;
     75         line-height: 30px;
     76         border-radius: 3px;
     77         padding: 3px;
     78          auto;
     79         right: 10px;
     80         max- 400px;
     81         min- 200px;
     82         resize: none;
     83         padding-left: 10px;
     84         border: 1px solid black;
     85     }
     86 
     87         #text:hover {
     88             border: 1px solid blue;
     89             box-shadow: red 0px 0px 10px 0px;
     90         }
     91 
     92     .qrSize {
     93         height: 40px;
     94         line-height: 30px;
     95         border-radius: 3px;
     96         padding-left: 10px;
     97         padding: 3px;
     98         max- 280px;
     99          auto;
    100         border:1px solid #aaa7a7;
    101     }
    102 
    103     #qrcode {
    104          auto;
    105         height: auto;
    106         float: left;
    107         padding: 10px;
    108         border: 1px solid #00ff90;
    109         border-radius: 5px;
    110         display: inline-block;
    111         margin-left: 10px;
    112         min-height:50px;
    113         min-50px;
    114     }
    115 
    116     #test2 div {
    117          40px;
    118         height: 40px;
    119     }
    120     #test3 div {
    121          40px;
    122         height: 40px;
    123     }
    124 
    125     #qrBGC {
    126         display: inline-block;
    127          130px;
    128         height: 36px;
    129         line-height: 40px;
    130         border-radius: 3px;
    131         border: 1px solid #808080;
    132         padding-left: 10px;
    133     }
    134     #qrFGC {
    135         display: inline-block;
    136          130px;
    137         height: 36px;
    138         line-height: 40px;
    139         border-radius: 3px;
    140         border: 1px solid #808080;
    141         padding-left: 10px;
    142     }
    143 
    144     .createQRBtn {
    145         /*max- 350px;*/
    146          60%;
    147         margin-left: 20%;
    148         height: 40px;
    149         line-height: 40px;
    150         text-decoration: none;
    151     }
    152 
    153     .downloadQRBtn {
    154          60%;
    155         margin-left: 20%;
    156         height: 40px;
    157         line-height: 40px;
    158         text-decoration: none;
    159     }
    160 </style>
    161 <script type="text/javascript">
    162     //初始化二维码
    163     var qrcode = new QRCode(document.getElementById("qrcode"), {
    164          200,
    165         height: 200
    166     });
    167     //生成二维码
    168     function makeCode() {
    169         var elText = document.getElementById("text");
    170         if (!elText.value) {
    171             alert("请输入要生成二维码的连接!");
    172             elText.focus();
    173             return;
    174         }
    175         $("#qrcode").empty();
    176         qrcode = new QRCode(document.getElementById("qrcode"), {
    177              $(".qrSize").val(),
    178             height: $(".qrSize").val(),
    179             colorLight: $("#qrBGC").val(),
    180             colorDark: $("#qrFGC").val()
    181         });
    182         qrcode.makeCode(elText.value);
    183     }
    184 
    185     //下载二维码
    186     function downloadIamge() {
    187         var imgs = document.getElementById("qrcode").getElementsByTagName("img")
    188         var a = document.createElement('a')
    189         a.download = 'xds' + new Date().getTime() || '下载图片名称'
    190         a.href = imgs[0].src
    191         document.body.appendChild(a);
    192         a.click();
    193         document.body.removeChild(a);
    194     }
    195     $(document).ready(function () {
    196         makeCode();
    197 
    198         $("#text").on("keydown", function (e) {
    199             if (e.keyCode == 13) {
    200                 makeCode();
    201             }
    202         });
    203         //点击生成二维码
    204         $(".createQRBtn").click(function () {
    205             makeCode();
    206         });
    207         //点击下载二维码
    208         $(".downloadQRBtn").click(function () {
    209             if ($("#qrcode:has(img)").length == 0) {
    210                 alert("请先生成二维码再点击下载!");
    211             }
    212             else {
    213                 downloadIamge(); 
    214             }
    215         });
    216 
    217         $(".inputUrl").each(function () {
    218             $(this).children("input").css({ "width": ($(this).width() - 120) + "px" });
    219             $(this).children("select").css({ "width": ($(this).width() - 120) + "px" });
    220         });
    221 
    222         var windowsWidth = $(window).width();
    223         if (windowsWidth > 168) {
    224             $(".qrSize").append('<option value="400">400 X 400</option>');
    225             $(".qrSize").append('<option value="500">500 X 500</option>');
    226         }
    227     });
    228 </script>
    229 <script src="~/Content/layui/lay/modules/form.js"></script>
    230 <script type="text/javascript">
    231     layui.use('colorpicker', function () {
    232         var colorpicker = layui.colorpicker;
    233         //初始色值
    234         colorpicker.render({
    235             elem: '#test2'
    236             , color: '#ffffff' //设置默认色
    237             , done: function (color) {
    238                 $("#qrBGC").val(color);
    239             }
    240         }); 
    241         colorpicker.render({
    242             elem: '#test3'
    243             , color: '#000000' //设置默认色
    244             , done: function (color) {
    245                 $("#qrFGC").val(color);
    246             }
    247         }); 
    248     });
    249 </script>

    运行效果图

    image.png

    这里面的两个颜色选择器用的是layui前端框架里面的

    通过jquery  将选中的值展示在文本框中

     1 layui.use('colorpicker', function () {
     2         var colorpicker = layui.colorpicker;
     3         //背景色初始色值
     4         colorpicker.render({
     5             elem: '#test2'
     6             , color: '#ffffff' //设置背景默认色
     7             , done: function (color) {//点击确定之后的回调
     8                 $("#qrBGC").val(color);//给背景颜色文本框赋值
     9             }
    10         }); 
    11         //前景色初始色值
    12         colorpicker.render({
    13             elem: '#test3'
    14             , color: '#000000' //设置前景默认色
    15             , done: function (color) {
    16                 $("#qrFGC").val(color);//给前景颜色文本框赋值
    17             }
    18         }); 
    19     });
    20     //这边是两个文本框的代码和格式
    21      <div class="inputUrl">
    22             <span style="display:block;height:40px;line-height:40px;float:left;">背景颜色:</span>
    23             <input type="text" readonly value="#ffffff" id="qrBGC" />
    24             <div id="test2" style="height:40px;line-height:40px;40px;"></div>
    25         </div>
    26         <div class="inputUrl">
    27             <span style="display:block;height:40px;line-height:40px;float:left;">前景颜色:</span>
    28             <input type="text" readonly value="#000000" id="qrFGC" />
    29             <div id="test3" style="height:40px;line-height:40px;40px;"></div>
    30         </div>

    这边是点击下载之后调用的下载img标签里面的图片的代码

     1 //下载二维码
     2     function downloadIamge() {
     3         var imgs = document.getElementById("qrcode").getElementsByTagName("img")
     4         var a = document.createElement('a')
     5         a.download = 'xds' + new Date().getTime() || '下载图片名称'
     6         a.href = imgs[0].src
     7         document.body.appendChild(a);
     8         a.click();
     9         document.body.removeChild(a);
    10     }
  • 相关阅读:
    Spring MyBatis多数据源分包
    ubuntu Ngin Install
    Ubuntu16.04开启root用户,并远程登录
    ubuntu16.04LTS更换阿里源
    修改DIV滚动条样式
    Spring-Boot配置文件数据源配置项
    Springboot 版本+ jdk 版本 + Maven 版本的对应关系
    CAS配置(3)之restful-api接入接口
    Java.Cas4.0客户端接入配置
    Java.HttpClient绕过Https证书解决方案二
  • 原文地址:https://www.cnblogs.com/yanwu/p/11103167.html
Copyright © 2011-2022 走看看