js生成二維碼以及插入圖片
js生成二維碼以及插入圖片
先根據qrcode官網demo,不同屬性值的變化,二維碼的變化效果:https://larsjung.de/jquery-qrcode/latest/demo/
進入demo中,審查元素檢視裡面引用的js檔案,你會發現jquery-qrcode-0.14.0.js,這個版本支援二維碼中插入圖片。
下面是我寫的一個列子:
引用js:
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jquery-qrcode-0.14.0.js"></script>
index.html
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>生成二維碼</title> <script type="text/javascript" src="jquery-1.11.2.min.js"></script> <script type="text/javascript" src="jquery-qrcode-0.14.0.js"></script> <script type="text/javascript" src=" xy <script type="text/javascript"> $(document).ready(function(){ var options={}; options.url="http://www.baidu.com"; //二維碼的連結 options.dom="#code";//二維碼生成的位置 options.image=$('#img-buffer')[0];//圖片id options.render="canvas";//設定生成的二維碼是canvas格式,也有image、div格式 xyqrcode(options); }); </script> </head> <body> <div id="code"></div> <img id="img-buffer" src="gy.jpg"> </body> </html> |
xyqrcode.js(給qrcode傳生成的二維碼屬性)
function xyqrcode(options) { } |