一、意淫场景2年前接触网站建设后，二维码也进入了我折腾的范围，当时意淫了这样一个场景：当用户首次在别人电脑上看到我们的网站时，突然有事要离开，但是这个网页内容很赞，实在难以割舍，他该怎么办？ 我继续意淫了多个解决办法：
很明显，在这种场景下，网页上如果能提供一个二维码就能给网站增加一个忠实访客，甚至是粉丝。 二、后台实现我这人把，技术不行，但只要有想法就立马付诸实践，认为技术再难也不会是瓶颈。 博客用的语言是php，因为第一时间用php实现了这个功能，应用到网站就是这个样子： 源码也非常简单，感兴趣的看下：https:///5031.html 三、前台实现本来这个PHP二维码用得挺好的，反正做了CDN缓存，速度负载都不用考虑。最近在一个国外的网站看一个源码的时候，好奇的看看网页的二维码是什么地址是，发现居然是canvas生成的！ 是咯，为毛之前我没想到JS生成二维码这一茬呢？ 果然还是想法和见识更重要啊！知道有这个途径，怎么实现基本是小菜一碟了。 顺手百度了一下，果然一堆教程，而且个个历史悠久，看来自己out怪不得别人。 实现很简单，DEMO如下：
丢到SAE试了下，效果还不错：http://atools.sinaapp.com/demo.html 更多参数如下： render : 'canvas',//设置渲染方式 width : 256, //设置宽度 height : 256, //设置高度 typeNumber : -1, //计算模式 correctLevel : QRErrorCorrectLevel.H,//纠错等级 background : '#ffffff',//背景颜色 foreground : '#000000' //前景颜色 四、中文兼容从分享这个教程的博客那知道，上述JS生成二维码是不支持中文内容的，而少数个人博客可能会使用中文的url路径，那么就不适用了。 其实，要解决也挺简单，只要二维码编码前把字符串转换成UTF-8即可。 博主也提供相关JS转换代码：
因此，如果内容含有中文，就需要用这个函数先转码，比如前文的DEMO修改如下： <html><head><meta charset='utf-8'><script src='//libs.cdnjs.net/jquery/1.8.2/jquery.min.js'></script><script src='//libs.cdnjs.net/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>参考文章：http://suflow./blog/1687396 五、Begin主题Ps：哈，突然发现鸟哥博客已经用上了，看来我们想到一起去了，相信begin新版本就会集成。 说了半天代码和demo，可能还是有很多朋友不会用，下面再简单介绍下把js生成二维码集成到Begin的方法。 Begin还是在上几个版本就已经集成了二维码图片功能，不过用的是外部api生成的，加载速度差强人意。当然，到了张戈博客，第一时间就换成了自建的php二维码api了。 现在get到了新技能，所以我也第一时间也将博客的二维码改成了js方式了，修改很简单： ①、加载js代码：
将上述代码添加到Begin主题的header.php或footer.php当中（也可以将上述js文件的内容合并到主题的全局js，比如scripts.js）。 ②、修改php代码： 编辑 begin/inc/scroll.php 这个文件，如下修改即可：
每个<li>代表一个按钮，上下位置自行按需调整即可。全部完成之后，彻底刷新各种缓存，就能看到前文贴图一样的效果了！其他主题只需参考折腾即可。
六、兼容方案前几天，鸟哥反馈我博客在IE8会导致整个浏览器卡死的问题！我苦逼定位了2个多小时才搞定！ 定位方法非常苦逼：
尼玛，发现问题出现在头部输出里面，于是分别开启和关闭头部输出，得出头部输出内容，然后一项一项添加上去看是否会卡B。 最终，发现居然是一个我自定义的CSS代码导致的？？？原来是一个CSS属性的大括号被我写成了中文符号｝，真是R了狗了。。。 在测试中，我发现IE下无法生成二维码，于是脑补了下，发现IE不支持canvas模式，只支持table模式。 因此多写一个判断搞定：
Ps：没错，这也是史上最短的IE判断，大家可以记录下，以备后用。 等使用table模式后，发现生成的二维码惨不忍睹，而且还扫不了： 后来和鸟哥交流的时候，他说是这主题table样式有冲突，重新下指定下二维码的table属性即可： <!-- table模式下修复点阵过于分散导致二维码扫描失效问题 --><style>.qr-img td { border: none;padding: 0;}</style>其实，table模式就是黑白表格组合原理，主题定义的表格样式把qrcode生成的二维码搞成了鬼样。 Ps：此项修复已加入到上一步Begin代码中，其他主题请自行参考。 七、对比分析本文介绍的二维码是每个页面动态生成的二维码，扫码后打开的也是当前页面，但是不管是静态还是动态，图片加载的方式总是要产生一个http 请求的，当页面处于海量访问时就会带来一定的负载了。。。 但是，如果使用js生成二维码的方式，这图片就在前台浏览器生成的了。抛开JS的兼容性不说，在海量请求场景应该可以极大的减少http请求量吧？ 当然，JS生成方式需要多载入一个Jquery.qrcode.min（通用JQ一般都有，就不算了）。看了下，这个JS只有13KB： 而且，我们完全可以把他合并到其他JS当中，那就连http请求都省了！可见，换成JS方式的性价比还是比较可观的！当然，JS的兼容性就另说了，这里就不多说了，感兴趣的可以试试。 |
|
|
来自： ZhouAndrew > 《AI&NewIT》
