JavaScript实现在线生成二维码

何处锦绣不灰堆

发布于 2020-05-29 12:22:32

5730

发布于 2020-05-29 12:22:32

文章被收录于专栏：农历七月廿一农历七月廿一

普及一下二维码是什么：

二维条码是指在一维条码的基础上扩展出另一维具有可读性的条码，使用黑白矩形图案表示二进制数据，被设备扫描后可获取其中所包含的信息。

这是二维码的基本结构

当然看了这些我不是要做这个，而是用在线的接口实现，哈哈

效果预览：

我们简单的做一个这个！

CSS：

hr{width: 35%;}
button{background-color: #009F95;border-color: #009F95;margin-left: 8%;font: "微软雅黑";font-size: 1.5rem;}
button:hover{background-color: #C12E2A;border-color: #C12E2A;}
.boderdiv{margin-left:40%;width: 50rem;height: 50rem;}

H5：

<div class="boderdiv">
			<label>二维码生成器</label><br /><hr/>
			请输入内容：<input type="text" name="" id="name" value=""/><br /><br />
			请选择背景颜色：<input type="color" name="color" id="bgcolor"><br /><br />
			请选择前景颜色：<input type="color" name="color" id="fgcolor"><br /><br />
			请选择渐变颜色：<input type="color" name="color" id="gccolor"><br /><br />
			<hr />
			<button type="button" id="" value="" οnclick="_Qrcode()"/>点击生成</button><br /><br />
				<div id="code">
				</div>
		</div>

JS：

function _Qrcode(){
			/*将之前生成的二维码清空*/
			var mainObj = $('#code');
                mainObj.empty();
			/*取到用户的的数据*/
			var name = $("#name").val();
			var _bgcolor = $("#bgcolor").val().split("#");
			var _fgcolor = $("#fgcolor").val().split("#");
			var _gccolor = $("#gccolor").val().split("#");
			console.log(_bgcolor[1]);
			/*将用户数据放入链接种，然后img填充到div*/
			var _img = '<img src="http://qr.liantu.com/api.php?bg='+_bgcolor[1]+'&fg='+_fgcolor[1]+'&gc='+_gccolor[1]+'&text='+name+'"/>';
			$("#code").append(_img);
		}

我做的是比较简陋的，没有做美化，你们可以扩展的比较多，自己美化一下就行了。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018-06-21 ，如有侵权请联系 cloudcommunity@tencent.com 删除

二进制