您当前的位置：主页 > 教程合集 > 网站建设 > 网站首页网站建设
用JS生成当前网页二维码
发布时间：2016-01-21 10:30:17编辑：余斗阅读：(0)字号： 大 中 小
余斗在张戈博客发现他的每个页面都会生成一个二维码，手机扫描这个二维码就能在移动端查看响应的网页，觉得这个细节很好，最近他也更新了JS实现当前页面二维码的实现方法，余斗已经成功在自己博客实现，其实很简单。
代码如下：
<html>
<head>
<meta charset="utf-8">
<script src="//cdn.bootcss.com/jquery/1.8.2/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
</head>
<body>
<div id="output"></div>
<script type="text/javascript">
content = 'https://zhangge.net/';
$('#output').qrcode({
width: 200,
height: 200,
render: "canvas",
correctLevel: 0,
text: content
});
</script>
</body>
</html>
此代码直接用JS控制生成二维码在标签中，所生成的二维码是每个页面动态生成的二维码，扫码后打开的也是当前页面，但是不管是静态还是动态，如果采用古老的图片加载方式总是要产生一个http请求的，当页面处于海量访问时就会带来一定的负载了，这对网站服务器压力很大，而使用js生成二维码的方式，这图片就在前台浏览器生成的了，就不会对服务器产生多余请求，这个JS只有13KB，对网页加载影响可以不计。
预览及下载请点击：《用JS生成当前网页二维码(文件)》
其中控制二维码的生成的参数还有：
render : "canvas",//设置渲染方式
width : 256, //设置宽度
height : 256, //设置高度
typeNumber : -1, //计算模式
correctLevel : QRErrorCorrectLevel.H,//纠错等级
background : "#ffffff",//背景颜色
foreground : "#000000" //前景颜色
中文网址兼容解决方法
由于这个JS是从外国传入，中文格式的网址生成不了二维码，所以还需要进一步改进，只要二维码编码前把字符串转换成utf-8即可，JS转码函数为：
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;
}
代入前面的代码中，完整为：
<html>
<head>
<meta charset="utf-8">
<script src="//cdn.bootcss.com/jquery/1.8.2/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
</head>
<body>
<div id="output"></div>
<script type="text/javascript">
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;
}
content = utf16to8('手机扫一扫，精彩随声带！');
$('#output').qrcode({
width: 200,
height: 200,
render: "canvas",
correctLevel: 0,
text: content
});
</script>
</body>
</html>
预览中文格式的网址二维码生成，可以点击余斗博客底部网站的Tags页，找个中文的tags测试即可。
IE兼容解决方法
张戈于昨天更新文章，这个代码在IE中可能无法生成二维码，因为IE是不支持canvas模式，只支持table模式。因此多写一个判断：
<script type="text/javascript">
if(!+[1,]){ /* 新增判断：如果是IE浏览器，则使用table兼容方式 */
Render = "table";
} else {
Render = "canvas";
}
$('#qr-img').qrcode({width:150,height:150,render:Render,correctLevel:0,text:window.location.href});
</script>
但是用table生成的二维码扫描不了，还需要指定下二维码的table属性，CSS中引入二维码的类名加入：
<!-- table模式下修复点阵过于分散导致二维码扫描失效问题 -->
<style>.qr-img td { border: none;padding: 0;}</style>
最后，余斗奉上自己博客实现二维码的整个html及css样式,html代码如下：
<html>
<body>
<div id="tbox">
<a id="ewm" href="" title="二维码" >
<div class="qr-img">
<div class="ico"></div>
<div id="output"></div>
<div id="msg">手机扫一扫 精彩随身带</div>
</div>
<script type="text/javascript">
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;
}
if(!+[1,]){ /* 新增判断：如果是IE浏览器，则使用table兼容方式 */
Render = "table";
} else {
Render = "canvas";
}
$('#output').qrcode({width:150,height:150,render:Render,correctLevel:0,text:window.location.href});
</script>
</a>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js.js"></script>
</body>
</html>
CSS代码如下：
*html { background-image: url(../images/08ea4dd36e9f4dfa9334ed9857dae4a5.gif); background-attachment: fixed; }/*解决IE6下滚动抖动的问题*/
#tbox { width: 54px; float: right; position: fixed; right: 50px; bottom: 15px; _position: absolute; _bottom: auto; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)||0)-(parseInt(this.currentStyle.marginBottom, 10)||0)));
_margin-bottom: 15px; }/*解决IE6下不兼容 position:fixed 的问题*/
#ewm{ width: 54px; height: 56px; display: block; background:url(../images/icons.png) no-repeat #111 ;box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7); border-radius: 10px;}
#ewm:hover{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f000000',endColorstr='#3f000000');background-color:rgba(17, 17, 17, 0.5)}
#ewm{background-position:10px -451px;display:block;}
#ewm:hover .qr-img{display:block;}
.qr-img {display:none;position: absolute;border: 3px solid rgb(221, 221, 221); background:#fff none repeat scroll 0 0;border-radius: 5px;border: 1px solid #ddd;border-radius:2px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); padding: 10px 10px 2px;max-width: 170px;right:60px;bottom:1px;z-index: 9999; }
.qr-img td { border: none;padding: 0;}
.ico{display:block;background:url(../images/qclogo.png) no-repeat scroll 0 0;position: absolute;top:75px;right: 75px;width: 30px;height: 30px;}
#output{padding: 8px 8px 2px 8px;}
#msg { color: #000;font-size: 14px; text-align: center;}
余斗仿照张戈把自己的logo也加到二维码中间，这不影响二维码的扫描，是不是显得更好看了?
- 转载请注明：用JS生成当前网页二维码
- 版权声明：本站原创文章，由余斗余斗发表在网站建设分类下，于2016-01-21最后更新