分享两个qrcode 生成二维码的jq

最新推荐文章于 2022-01-06 15:02:18 发布

weixin_33896069

最新推荐文章于 2022-01-06 15:02:18 发布

阅读量162

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/18y/blog/827878

版权

为什么80%的码农都做不了架构师？>>>

最后在网上发现了两个qrcode 一个算是原作者的(转载的人太多不知道哪个是正版)

http://github: https://github.com/jeromeetie

这个应该是原作者的了但是不支持logo

http://pan.baidu.com/s/1nuSYXL3 百度云js文件

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <meta charset="utf-8"/>
<script src="__PUBLIC__/js/jquery.js"></script>
 <script src="__PUBLIC__/js/qrcode.js"></script>

 <style>
    body{
        text-align: center;
    }
    #qrcode{
      width: 164px;
      height: 164px;
      position: absolute;
  
      text-align: center;
  
      left:0;
      right:0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
 </style>
</head>
<body>
<div>
  <div style="margin-left:auto">
    <div id="qrcode"></div> 
  </div>
</div>

<script>
$('#qrcode').qrcode({
  width: 164,
  height: 164,
  text: "{$link}"
});
</script>
</body>
</html>

第二个是别人修改过的，支持中文与logo，亲测可用

js文件 http://pan.baidu.com/s/1b1Be5w

使用方式


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>该二维码支持中文和LOGO</title>

<script type="text/javascript" src="__PUBLIC__/js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/utf.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery.qrcode.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#qrcodeCanvas").qrcode({
      render : "canvas",    //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
      text : "{$link}",    //扫描了二维码后的内容显示,在这里也可以直接填一个网址，扫描二维码后
      width : "200",               //二维码的宽度
      height : "200",              //二维码的高度
      background : "#ffffff",       //二维码的后景色
      foreground : "#000000",        //二维码的前景色
      src: '__PUBLIC__/img/photo.jpg'             //二维码中间的图片
    });
  });
</script>

</head>
<body>
    <center>
      <h2>该二维码支持中文和LOGO</h2>
      <div id="qrcodeCanvas"></div>
    </center>
</body>
</html>

文件路径需要修改成你自己的

转载于:https://my.oschina.net/18y/blog/827878