使用javascript生成当前博文地址的二维码图片

前面的话

　　在电脑端发现一篇好的博文，想在手机上访问。这时，就必须打开手机浏览器输入长长的URL地址才行，非常不方便。如果在博客标题的后面跟一张小的图片，点击该图片后，出现一张二维码的大图，然后再通过手机扫一扫，来进行博文的访问，就相对方便很多。

　　通过搜索引擎搜索了一些生成二维码的文章，发现其并不是一件容易的事。同时，也发现了qrcode插件，该插件专门用于生成二维码。于是，在qrcode的基础上，实现了一个二维码插件qr

效果演示

　　如果细心的话，会发现该博文标题的后面紧跟着一个表示二维码的手机小图标。点击该图标后，出现二维码大图，通过手机扫一扫，即可进行手机端对网页的访问。再点击小图标或二维码图片后，二维码图片消失

　　我将该插件命名为qr.js，使用方式很简单，只要进行如下引入既可

<script src="http://files.cnblogs.com/files/xiaohuochai/qr.js"></script>

原理说明

　　1、首先分析博客园的HTML结构

　　由上图可知，博客园的博文位于类名为‘post‘的div中，外层是id名为‘topics‘的div，而博文的标题位于类名为‘postTitle‘的h1中。所以，当页面结构加载完成后，就可以在该标题的后面添加图片了

var oBox = document.getElementById(‘topics‘);
var oTitle = oBox.getElementsByTagName(‘h1‘)[0];
console.log(oTitle.innerHTML);

　　2、二维码小图生成

　　现在，需要准备一个二维码小图，插入博文标题后面

　　通过iconfont，找到一个二维码小图，该小图如下所示，因为是为了方便移动端使用，所以使用了一个表示‘小手机’的图标

　　然后将对该图片进行base64编码

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAoklEQVQ4T+2T4Q2CMBCFv27CBjgCG+gIjAAbOAIjOIJs4Ai6gRvIBpjXXCOp19T/8pJLoTneXcj3Ah91wAV4bu68xwXoAZ2EzEAmE9AWTB6AelRDyaAx9zgh0wE4ATczcTdIE7wl0oe7wX/8RMHigfQTB3fDdM1IEvYyONdIVEOSqDwCY2Z2NaS/UNbqMSQmvauUPlfbNKpBSdTUVyXSs/XyBlRCNBG20I28AAAAAElFTkSuQmCC

　　通过查看样式，使用的皮肤对img标题设置了margin属性，如下所示

　　所以，这里需要对margin置0

var oBox = document.getElementById(‘topics‘);
var oTitle = oBox.getElementsByTagName(‘h1‘)[0];
var oImg = new Image();
oImg.id = ‘oImg‘;
oImg.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAoklEQVQ4T+2T4Q2CMBCFv27CBjgCG+gIjAAbOAIjOIJs4Ai6gRvIBpjXXCOp19T/8pJLoTneXcj3Ah91wAV4bu68xwXoAZ2EzEAmE9AWTB6AelRDyaAx9zgh0wE4ATczcTdIE7wl0oe7wX/8RMHigfQTB3fDdM1IEvYyONdIVEOSqDwCY2Z2NaS/UNbqMSQmvauUPlfbNKpBSdTUVyXSs/XyBlRCNBG20I28AAAAAElFTkSuQmCC";
oImg.style.margin = ‘0‘;
oTitle.appendChild(oImg);

　　3、将该网页的URL转换为二维码

　　获取URL非常简单，只要使用location对象的href属性即可

　　接下来，就要使用QRCode插件来实现将URL转换为二维码的功能了，首先先下载qrcodejs插件，然后将博文的URL转换为自定义尺寸的二维码

<div id="qrcode"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/qrcode.min.js"></script>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: location.href,
    width: 80,
    height: 80
});
</script>

　　生成如下图所示的二维码图片

　　4、动态生成及鼠标点击事件

　　由于最终是要封装在一个js文件中的，所以第三步涉及到的HTML结构都需要动态生成

　　由于生成二维码需要依赖qrcodejs插件，所以只要当该插件加载完毕后，才可以进行后续操作。script标签支持load事件，但不兼容IE8-浏览器。所以，更保险的方法是使用window.onload

　　鼠标点击标识图片后，在标识图片的右侧显示生成的二维码图片，由于该二维码图片要相当于图片进行绝对定位，所以需要改变HTML结构，在小标识图片的外层添加一层oImgBox的div，用于定位大的二维码图片

//获取博文标题
var oBox = document.getElementById(‘topics‘);
var oTitle = oBox.getElementsByTagName(‘h1‘)[0];

//创建标识图片及外层包装div
var oImgBox = document.createElement(‘div‘);
oImgBox.style.cssText = ‘position:relative;display:inline-block;vertical-align:middle‘;
var oImg = new Image();
oImg.id = ‘oImg‘;
oImg.style.cursor = ‘pointer‘;
oImg.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAoklEQVQ4T+2T4Q2CMBCFv27CBjgCG+gIjAAbOAIjOIJs4Ai6gRvIBpjXXCOp19T/8pJLoTneXcj3Ah91wAV4bu68xwXoAZ2EzEAmE9AWTB6AelRDyaAx9zgh0wE4ATczcTdIE7wl0oe7wX/8RMHigfQTB3fDdM1IEvYyONdIVEOSqDwCY2Z2NaS/UNbqMSQmvauUPlfbNKpBSdTUVyXSs/XyBlRCNBG20I28AAAAAElFTkSuQmCC";
    oImg.style.margin = ‘0‘;
    oImgBox.appendChild(oImg);
    //将标识图片插入标题后面
oTitle.appendChild(oImgBox);    

//动态生成script标签，引入qrcode插件
var script = document.createElement("script");
script.type = "text/javascript";
script.src = ‘http://files.cnblogs.com/files/xiaohuochai/qrcode.min.js‘;
document.body.appendChild(script);

//动态生成div标签，用于放置通过qrcode插件生成的二维码大图，默认隐藏显示
var oDiv = document.createElement(‘div‘);
oDiv.id = ‘qrcode‘;
oDiv.mark = false;
oDiv.style.cssText = ‘display:none;position:absolute;left:20px;top:-40px‘;
oImgBox.appendChild(oDiv);
window.onload = function(){
    new QRCode(oDiv, {
        text: location.href,
        width: 80,
        height: 80
    });
}

//鼠标移入标识图片外层oImgBox后，在该标识图片的右侧显示二维码图片
oImgBox.onclick = function(){
    //如果mark为真，说明二维码图片正在显示，将其隐藏
    if(oDiv.mark){
        oDiv.style.display = ‘none‘;
    //否则说明二维码图片正在隐藏，将其显示
    }else{
        oDiv.style.display = ‘block‘;
    }
    //将mark标识置反
    oDiv.mark  = !oDiv.mark;
}

　　5、移动端优化

　　由于该功能只适用于电脑端，在移动端并无实际的用处。所以，可以通过用户代理检测，如果是非移动端，才执行上述操作

　　由于其他的插件也可能会用到window.onload，所以为了避免冲突，使用兼容性的事件处理程序函数

　　优化后的最终代码如下

(function(){
    //事件处理程序兼容写法
    function addEvent(target,type,handler){
        if(target.addEventListener){
            target.addEventListener(type,handler,false);
        }else{
            target.attachEvent(‘on‘+type,function(event){
                return handler.call(target,event);
            });
        }
    }
    function whichMobile(){
        var ua = navigator.userAgent;
        if(/iPhone OS (\d+_\d+)/.test(ua)){
            return ‘iPhone‘ + RegExp.$1.replace("_",".");
        }
        if(/iPad.+OS (\d+_\d+)/.test(ua)){
            return ‘iPad‘ + RegExp.$1.replace("_",".")
        }
        if(/Android (\d+\.\d+)/.test(ua)){
            return ‘Android‘ + RegExp["$1"];
        }
    }
    //如果是非移动端，则执行如下代码
    if(!whichMobile()){
        //获取博文标题
        var oBox = document.getElementById(‘topics‘);
        var oTitle = oBox.getElementsByTagName(‘h1‘)[0];

        //创建标识图片及外层包装div
        var oImgBox = document.createElement(‘div‘);
        oImgBox.style.cssText = ‘position:relative;display:inline-block;vertical-align:middle‘;
        var oImg = new Image();
        oImg.id = ‘oImg‘;
        oImg.style.cursor = ‘pointer‘;
        oImg.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAoklEQVQ4T+2T4Q2CMBCFv27CBjgCG+gIjAAbOAIjOIJs4Ai6gRvIBpjXXCOp19T/8pJLoTneXcj3Ah91wAV4bu68xwXoAZ2EzEAmE9AWTB6AelRDyaAx9zgh0wE4ATczcTdIE7wl0oe7wX/8RMHigfQTB3fDdM1IEvYyONdIVEOSqDwCY2Z2NaS/UNbqMSQmvauUPlfbNKpBSdTUVyXSs/XyBlRCNBG20I28AAAAAElFTkSuQmCC";
            oImg.style.margin = ‘0‘;
            oImgBox.appendChild(oImg);
            //将标识图片插入标题后面
        oTitle.appendChild(oImgBox);    

        //动态生成script标签，引入qrcode插件
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = ‘http://files.cnblogs.com/files/xiaohuochai/qrcode.min.js‘;
        document.body.appendChild(script);

        //动态生成div标签，用于放置通过qrcode插件生成的二维码大图，默认隐藏显示
        var oDiv = document.createElement(‘div‘);
        oDiv.id = ‘qrcode‘;
        oDiv.mark = false;
        oDiv.style.cssText = ‘display:none;position:absolute;left:20px;top:-40px‘;
        oImgBox.appendChild(oDiv);    

        addEvent(window,‘load‘,function(){
            new QRCode(oDiv, {
                text: location.href,
                width: 80,
                height: 80
            });
        })

        //鼠标移入标识图片外层oImgBox后，在该标识图片的右侧显示二维码图片
        addEvent(oImgBox,‘click‘,function(){
            //如果mark为真，说明二维码图片正在显示，将其隐藏
            if(oDiv.mark){
                oDiv.style.display = ‘none‘;
            //否则说明二维码图片正在隐藏，将其显示
            }else{
                oDiv.style.display = ‘block‘;
            }
            //将mark标识置反
            oDiv.mark  = !oDiv.mark;
        })
    }
})();

时间： 2024-11-10 05:25:17

使用javascript生成当前博文地址的二维码图片的相关文章

随手记一次利用开源zxing生成带嵌入logo的二维码图片

之前就在项目里面用过zxing生成二维码,最近另一个项目同样需要用到二维码,故重新在学了学利用zxing生成二维码 接下来先做准备工作了,因为我是用vs2013上开发的,故选择了.net4.5版本的zxing.dll.另外准备了一张准备嵌入的图片,代码如下: 1 using System; 2 using System.Collections; 3 using System.Collections.Generic; 4 using System.Drawing; 5 using System.L

JavaScript生成二维码图片

1.引入一个二维码工具的js文件,同时需要引入jquery文件 下面是jquery.qrcode.min.js文件内容: 1 (function(r){r.fn.qrcode=function(h){var s;function u(a){this.mode=s;this.data=a}function o(a,c){this.typeNumber=a;this.errorCorrectLevel=c;this.modules=null;this.moduleCount=0;this.dataC

php生成带自定义logo和带二维码跳转自定义地址的二维码

index.php<?phpheader('Content-type:text/html;charset=UTF-8');// 指定允许其他域名访问header('Access-Control-Allow-Origin:*');// 响应类型fheader('Access-Control-Allow-Methods:POST');// 响应头设置header('Access-Control-Allow-Headers:x-requested-with,content-type');include

C# 利用QRCode生成二维码图片

引用LYBwwp的博文http://blog.csdn.net/lybwwp/article/details/18444369 网上生成二维码的组件是真多,可是真正好用的,并且生成速度很快的没几个,QRCode就是我在众多中找到的,它的生成速度快.但是网上关于它的使用说明,真的太少了,大都是千篇一律的复制粘贴.这是本要用它做了一个项目后,简单的整理了一下. 组件下载地址:http://download.csdn.net/detail/lybwwp/6861821 下载文件包包含ThoughtWo

JAVA生成二维码图片代码

首先需要导入 QRCode.jar 包 下载地址看这里   http://pan.baidu.com/s/1o6qRFqM import java.awt.Color;import java.awt.Graphics2D;import java.awt.Image;import java.awt.image.BufferedImage;import java.io.File;import java.io.IOException;import java.io.UnsupportedEncoding

C#生成二维码图片

使用C#生成二维码图片,并保存到指定的目录. 1.添加对生成二维码图片dll的引用: 下载地址:http://files.cnblogs.com/files/zflsyn/ThoughtWorks.QRCode.zip 2.引用命名空间 1 using System.Text; 2 using System.Drawing; 3 using ThoughtWorks; 4 using ThoughtWorks.QRCode; 5 using ThoughtWorks.QRCode.Codec;

使用python调用zxing库生成二维码图片

(1)     安装Jpype 用python调用jar包须要安装jpype扩展,在Ubuntu上能够直接使用apt-get安装jpype扩展 $ sudo apt-get install python-jpype 关于使用Jpype调用jar包的方式.请看http://blog.csdn.net/niuyisheng/article/details/9002926 (2)     得到zxing  jar包 使用zxing第三方库生成二维码图片,关于zxing的介绍能够看其github地址:h

java--实现将文字生成二维码图片，并在中间附上logo，下方附上文字

前段时间因为工作需要,要实现将一段文字或者url生成二维码,然后中间附上logo,下方正中间附上文字的功能. 上网找了几篇教程学习了下,由于没有保存借鉴的博文链接,所以就没po上参考文章的链接啦,感谢几位博主的分享~ 大概的实现效果如下图所示: 实现步骤: (1)导入java_ZXing_jar包,点此下载jar包 (2)编写画二维码代码 1 package QRCode; 2 3 import com.google.zxing.common.BitMatrix; 4 import javax.

怎么制作生成苹果手机app应用的下载二维码图片

原文网址:http://jingyan.baidu.com/article/8065f87ff654262331249886.html app store应用生成二维码操作步骤: 1.首先在MAC上的iTunes里找到你的苹果app应用程序的链接地址,如图所示: 2.找一个可以生成二维码网站,如cli.im,把拷贝好的链接粘贴进去,点击［生成二维码］: 3.现在右侧就已经生成好二维码图片,点击［网址输入框］下面的［下载］就可以把二维码图片完整的下载到你的电脑里了.