摘要：
前面介绍了使用javascript生成二维码，但是这样并不能满足我们的需求，我们有时也会看到带有logo的二维码，本文就介绍如何生成带有logo的二维码。
简介：
主要使用了svg的文本和图像，我这里也有介绍的，可以先了解这个再来看。二维码使用qrcode.js生成
首先分享下在二维码中插入文字，如下：
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="qrcode.js"></script> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="qrcode"/> <text x="85" y="85" style="fill:orange;font-size: 30;font-weight:bold">夕阳白雪</text> </svg> <script type="text/javascript"> var qrcode = new QRCode(document.getElementById("qrcode"), { width : 100, height : 100, useSVG: true }); qrcode.makeCode("http://www.cnblogs.com/xiyangbaixue"); </script>
效果
带图片的二维码：
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="qrcode.js"></script> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="qrcode"/> <image xlink:href="qq.png" x="130" y="60" height="30" width="30"> </svg> <script type="text/javascript"> var qrcode = new QRCode(document.getElementById("qrcode"), { width : 100, height : 100, useSVG: true }); qrcode.makeCode("http://www.cnblogs.com/xiyangbaixue"); </script>
效果：
![[SWPU 2019]神奇的二维码](https://ucc.alicdn.com/pic/developer-ecology/wj4rajzn5cqvy_f590c5fe4cf7420f8e4bf7bf23bcb6a9.png?x-oss-process=image/resize,h_160,m_lfit)
