带有logo的二维码

摘要：

　　前面介绍了使用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>

 

效果：