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/

posted @ 2019-01-07 16:01  missme_lina  阅读(1050)  评论(0编辑  收藏  举报
喜欢就“全力以赴”,不对盘就“在下告辞”,原则是“可以辛苦,但不能委屈”。