🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
### 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=" xyqrcode.js"></script> <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) { var settings = { dom:'', render: 'canvas', //生成二维码的格式还有image、div ecLevel:"H", text:"", background:"#ffffff", fill:"#333333", //二维码纹路的颜色 fontcolor:"#ff9818", fontname:"Ubuntu", image:{}, label:"", mPosX:0.5, //图片在X轴的位置 mPosY:0.5, //图片在X轴的位置 mSize:0.27, //图片大小 minVersion:10, mode:4, quiet:1, radius:1, size:400 }; if (options) { $.extend(settings, options);//options对象跟settings比较,相同的就替换,没有的就添加 } if(settings.dom.length==0){ window.console.log("Error: dom empty!"); return; } if(settings.url.length==0){ window.console.log("Error: url empty!"); return; } settings.text=settings.url; //在qrcode生成二维码的地址是text。这里就把url赋值给text $(settings.dom).qrcode(settings); } ~~~