HTML5 使用 JS 生成二维码，带头像
生活随笔
收集整理的這篇文章主要介紹了
HTML5 使用 JS 生成二维码，带头像
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一般在項目開發中，前端顯示給用戶掃描的二維碼基本都是由后端代碼生成的，那么這個高大上的功能能不能用 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", // 設置渲染方式 width: 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", // 設置渲染方式 width: 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
大家可以直接引用改地址，也可以下載后在本地引入
?
轉載于:https://www.cnblogs.com/lovling/p/10518556.html
總結
以上是生活随笔為你收集整理的HTML5 使用 JS 生成二维码，带头像的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【消息队列】kafka是如何保证消息不被
- 下一篇： Java 字符数字得到整数