主页 > 教程合集 > 网站建设 >

用JS生成当前网页二维码

时间:2016-01-21 阅读: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生成当前网页二维码

开通特权,即可免费下载全站所有千余TB网络资源,点击 >>> 资源目录 查看所有资源,覆盖音乐、影视、有声书、电子书、漫画、动漫、课程等,不限时间次数,永久免费,点击 >>> 特权详情 了解更多!

余斗余斗
  • 版权声明:原创文章由发表在网站建设分类下,2016-01-21最后更新,转载注明出处。

相关推荐

返回顶部