前端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   width: 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;width: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;width: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         width: 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-width: 400px;
 54         width: 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         width: 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         width: auto;
 79         right: 10px;
 80         max-width: 400px;
 81         min-width: 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-width: 280px;
 99         width: auto;
100         border:1px solid #aaa7a7;
101     }
102 
103     #qrcode {
104         width: 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-width:50px;
114     }
115 
116     #test2 div {
117         width: 40px;
118         height: 40px;
119     }
120     #test3 div {
121         width: 40px;
122         height: 40px;
123     }
124 
125     #qrBGC {
126         display: inline-block;
127         width: 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         width: 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-width: 350px;*/
146         width: 60%;
147         margin-left: 20%;
148         height: 40px;
149         line-height: 40px;
150         text-decoration: none;
151     }
152 
153     .downloadQRBtn {
154         width: 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         width: 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             width: $(".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>

 

运行效果图

这里面的两个颜色选择器用的是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;width: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;width: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     }

 

转载于:https://www.cnblogs.com/yanwu/p/11103167.html