JS生成二维码

JS生成二维码


 这个例子网上很多,貌似没有logo,我在原有版本上加入了LOGO,(先感谢下作者~~)
将下面的HTML代码复制下来,然后下载代码中指定的JS文件,并按规则引入,即可进行测试;
js.rar 包含了所用到的所有JS,图片需要自己定位,

<html>
<head>
<title>二维码demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS 二维码 JS生成二维码"/>
<!--此处需要引入三个JS文件
  一、jquery-1.10.js (这个版本可以随意更换试试,小弟没有做JQ的版本测试)
  二、qrcode.js
  三、jquery.qrcode.js
  顺序要注意,不能乱了顺序;
  该版本可以兼容所有低版本的 浏览器,包括IE6、7等等
-->
<script src="js/jquery-1.10.js" type="text/javascript"></script>
<script src="js/qrcode.js" type="text/javascript"></script>
<script src="js/jquery.qrcode.js" charset="utf-8" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
  $("#bt").bind("click",
    function () {
        var text = $("#text").val();
        //生成二维码可能和网上其他地方的资料不一样,添加了logo图片路径(之前不知道哪位高手写的第一版本,貌似没有logo功能,小弟在此基础上加的)
        $('#div_div').qrcode({
          text: utf16to8(text),
          height: 100,
          width: 100,
          //此处添加了个logo,可以随意替换链接
          src: 'file:///E:/test/erweima/images/123211.jpg'
        });
    }
  )
})
function utf16to8(str) { //转码
  var out, i, len, c;
  out = "";
  len = str.length;
  for (i = 0; i < len; i++) {
    c = str.charCodeAt(i);
    if ((c >= 0x0001) && (c <= 0x007F)) {
        out += str.charAt(i);
    } else if (c > 0x07FF) {
        out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
        out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
        out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
    } else {
        out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
        out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
    }
  }
  return out;
}
</script>
</head>
<body>
<input type="text" id="text" />
<input type="button" value="生成二维码" id="bt" />
<div id="div_div">
  <div id="qr_container" style="margin:auto; position:relative;"></div>
</div>
<!-- 用来校验该浏览器是否支持HTML5 -->
<canvas id="Canvas"></canvas>
</body>
</ html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值