demo:动态生成专属二维码

在日常生活中,随处可见二维码,那么js如何生成动态的专属二维码?其实,通过“二维码插件”我们可以快速生成二维码。在这,记录一下的生成专属二维码demo,一起来看看jquery.qrcode.js是怎么使用的。

相关插件

<!--布局需要一个放canvas画布的容器-->
<div class="myQRcode"></div>
<!--引用相关js:-->
<script src="jquery.min.js"></script>
<script src="utf.js"></script><!--qrcode.js引用utf.js,避免乱码-->
<script src="jquery.qrcode.js"></script>

js的使用

var codeUrl = "https://home.cnblogs.com/u/missme-lina"
$(".myQRcode").qrcode({
    render : "canvas",    //设置渲染方式,有table和canvas,使用canvas方式渲染性能相对来说比较好
    text : codeUrl,    //扫描二维码后显示的内容,可以直接填一个网址,扫描二维码后自动跳向该链接
    width : "215",               //二维码的宽度
    height : "215",              //二维码的高度
    background : "#ffffff",       //二维码的后景色
    foreground : "#000000",        //二维码的前景色
    src: 'https://pic.cnblogs.com/avatar/1211848/20190103102237.png' //二维码的logo图
}); 

实现效果

image

jquery.qrcode.js的API

请转载官方文档:https://larsjung.de/jquery-qrcode/

转载于:https://www.cnblogs.com/missme-lina/p/10221232.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值