这几天项目有一个新功能需要动态生成二维码,在网上琢磨一番之后知道了一个插件

head头部引入插件和jQuery

jQuery一定要在引入插件之前引入


<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>

body添加div容器

<div id="qrcode"></div>

jQuery代码

直接生成二维码

<script>
jquery('#qrcode').qrcode("https://haser.top/");
</script>

带属性生成二维码

<script>
//使用table生成
jQuery('#qrcode').qrcode({
    render: "table",
   width: 200, //宽度
   height:200, //高度
    text: "https://haser.top/"
});
 
//使用canvas生成
jQuery('#qrcode').qrcode({
    render: "canvas",
    text: "https://haser.top/"
});

//生成前景色为红色背景色为白色的二维码
jQuery('#qrcode').qrcode({
    render: "canvas", //也可以替换为table
    foreground: "#C00",
    background: "#FFF",
    text: "http://www.jq22.com"
});
</script>

插件引用地址

可以另存为之后保存到本地

扫描二维码,在手机上阅读!
Last modification:May 18th, 2021 at 09:47 am
请我喝一瓶农夫山泉嘛?