前端JS生成二维码
前端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');
参数说明
|
1
|
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 }
浙公网安备 33010602011771号