jquery-qrcode.js 二维码带 logo

复制代码
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <script src="jquery-3.3.1.min.js"></script>
 5     <script src="jquery-qrcode.js"></script>
 6     <!--
 7         //样例地址
 8         https://larsjung.de/jquery-qrcode/latest/demo/
 9         //jquery-qrcode.js下载地址
10         https://github.com/lrsjng/jquery-qrcode
11     -->
12     <style type="text/css">
13         #img-buffer {
14             display: none;
15         }
16     </style>
17 </head>
18 <body>
19     <div id="qrcode"></div>
20     <img src="img/1.jpg" id="img-buffer">
21     <script type="text/javascript">
22         $('#qrcode').qrcode({            
23             render: 'canvas',    //设置渲染方式,有table和canvas,使用canvas方式渲染性能相对来说比较好            
24             minVersion: 1,       // version range somewhere in 1 .. 40
25             maxVersion: 40,      
26             ecLevel: 'L',        //识别度  'L', 'M', 'Q' or 'H'            
27             left: 0,
28             top: 0,           
29             size: 200,           //尺寸           
30             fill: '#000',        //二维码颜色           
31             background: null,    //背景色            
32             text: 'no text',     //二维码内容            
33             radius: 0.1,         // 0.0 .. 0.5
34             quiet: 2,            //边距
35 
36             // modes
37             // 0: normal
38             // 1: label strip
39             // 2: label box
40             // 3: image strip
41             // 4: image box
42             mode: 4,
43             mSize: 0.3,          //图片大小
44             mPosX: 0.5,
45             mPosY: 0.5,
46 
47             label: 'jQuery.qrcode',
48             fontname: 'sans',
49             fontcolor: '#000',
50             image: $("#img-buffer")[0]
51         });
52     </script>
53 </body>
54 </html>
复制代码

 

posted @   gygang  阅读(8390)  评论(1编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示