使用jquery.code插件生成二维码

一、html部分代码

<div id="qrcode"></div>
<div>
内容：<input type="text" id="qrcodetext" value="222" placeholder="二维码内容"/></br>
size: <input type="text" id="qrcodesize" value="100" />px</br>
</div>

二、调用的插件,换成自己的js路径

<script th:src="@{/ajax/libs/jquery-qrcode/jquery.qrcode.min.js}"></script>
<script th:src="@{/ajax/libs/jquery-qrcode/qrcode.js}"></script>

三、生成二维码JS，亲测微信和chrome有效，如遇不能生成时，可以采用默认的渲染方式尝试

<script type="text/javascript">
var prefix = ctx + "demo/learn";
jQuery(function() {
$('#qrcodetext').change(function(){
var qrcodetext = $('#qrcodetext').val();
if(qrcodetext==""){
return false;
}
update();
});
$('#qrcodesize').change(function(){
var qrcodesize = $('#qrcodesize').val();
if(qrcodesize==""){
return false;
}
update();
});
update();
function update(){
$('#qrcode').html('');//先清空二维码
$('#qrcode').qrcode({
render: "canvas", //渲染方式两种，table和canvas方式
width: $('#qrcodesize').val(), //宽度
height:$('#qrcodesize').val(), //高度
errorLevel: "L", //纠错等级
text: $('#qrcodetext').val() ,//任意内容

background : "#ffffff",//背景颜色
foreground : "#000000" //前景颜色

});
}
});

</script>

 

转载于:https://www.cnblogs.com/lzc-wendy/p/11022074.html