jquery 生成二维码 作者: HAS 时间: 2020-12-14 分类: 学习笔记,JavaScript/jQuery,手把手教程 评论 [scode type="green"]这几天项目有一个新功能需要动态生成二维码,在网上琢磨一番之后知道了一个插件[/scode] [tag type="info"]head头部引入插件和jQuery[/tag] [scode type="yellow"]jQuery一定要在引入插件之前引入[/scode] ```javascript <script src="js/jquery.min.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js"></script> ``` [tag type="info"]body添加div容器[/tag] ```html <div id="qrcode"></div> ``` [tag type="info"]jQuery代码[/tag] [scode type="lblue"]直接生成二维码[/scode] ```javascript <script> jquery('#qrcode').qrcode("https://haser.top/"); </script> ``` [scode type="lblue"]带属性生成二维码[/scode] ```javascript <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> ``` ## 插件引用地址 [scode type="lblue"]https://zjt.haser.top/js/qrcode.js[/scode] 可以另存为之后保存到本地 [scode type="lblue"]jQuerycdn: https://www.jq22.com/cdn/[/scode] [scode type="lblue"]github地址:https://github.com/jeromeetienne/jquery-qrcode[/scode] [button color="danger" icon="fontello fontello-gratipay" url="https://cnd.haser.top/2020/12/14/536814990.zip "]插件下载[/button]