一般在项目开发中，前端显示给用户扫描的二维码基本都是由后端代码生成的，那么这个高大上的功能能不能用 JS 来绘制呢？ 答案是肯定的
首先我们需要一个插件 jquery.qrcode.js，该插件基于 jquery 插件，使用方法很简单，如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>二维码</title> <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script> <script src="https://blog-static.cnblogs.com/files/lovling/jquery.qrcode.js"></script> </head> <style type="text/css"> #output { width: 360px; padding: 0; } </style> <body> <div id="output"></div> </body> <script type="text/javascript"> $('#output').qrcode({ text: "ninhaonihaohnihao", // 二维码的内容 render: "canvas", // 设置渲染方式 360, // 设置宽度: 默认256 height: 360, // 设置高度: 默认256 background: "#ffffff", // 背景颜色 foreground: "#000000", // 前景颜色 }); </script> </html>
效果如下，这样，我们就可以自己生成 二维码了，可以用手机扫一扫，发现能完美获得 配置的内容
可是我们发现，某些官方网站的二维码中间是有 logo 的，那么这个可以加 logo 吗？
目前该插件不支持该功能，可是笔者是有强迫症的人，这个黑乎乎的二维码怎么能满足我呢，百度 google 一番，通过修改了插件的一些源码，终于实现了想象中的效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>二维码</title> <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script> <script src="https://blog-static.cnblogs.com/files/lovling/jquery.qrcode.js"></script> </head> <style type="text/css"> #output { width: 360px; padding: 0; margin: 100px auto 0 auto; } </style> <body> <div id="output"></div> </body> <script type="text/javascript"> $('#output').qrcode({ text: "ninhaonihaohnihao", // 二维码的内容 render: "canvas", // 设置渲染方式 360, // 设置宽度: 默认256 height: 360, // 设置高度: 默认256 background: "#ffffff", // 背景颜色 foreground: "#000000", // 前景颜色 src: "./my.jpg", // logo地址, 图片居中, 图片为二维码的 1/9 为最佳，可适当调整，但是太大会影响二维码的内容 imgWidth: 120, // logo宽度 imgHeight: 120 // logo高度 }); </script> </html>
效果如下，图片选的不是很好，效果不好看，不过总算是实现了
修改后的插件已上传到博客园，有兴趣的朋友可以下载看看，顺便看看能不能再优化 https://blog-static.cnblogs.com/files/lovling/jquery.qrcode.js
大家可以直接引用改地址，也可以下载后在本地引入