带有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>

 

效果：