使用javascript生成當前博文地址的二維碼圖片

時間  2019-11-21
標籤 使用 javascript 生成 當前 博文 地址 二維 圖片 欄目 JavaScript 简体版
原文   原文鏈接

前面的話

　　在電腦端發現一篇好的博文，想在手機上訪問。這時，就必須打開手機瀏覽器輸入長長的URL地址才行，很是不方便。若是在博客標題的後面跟一張小的圖片，點擊該圖片後，出現一張二維碼的大圖，而後再經過手機掃一掃，來進行博文的訪問，就相對方便不少。javascript

　　經過搜索引擎搜索了一些生成二維碼的文章，發現其並非一件容易的事。同時，也發現了qrcode插件，該插件專門用於生成二維碼。因而，在qrcode的基礎上，實現了一個二維碼插件qrcss

 

效果演示

　　若是細心的話，會發現該博文標題的後面緊跟着一個表示二維碼的手機小圖標。點擊該圖標後，出現二維碼大圖，經過手機掃一掃，便可進行手機端對網頁的訪問。再點擊小圖標或二維碼圖片後，二維碼圖片消失html

　　我將該插件命名爲qr.js，使用方式很簡單，只要進行以下引入既可java

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

 

原理說明

　　一、首先分析博客園的HTML結構git

　　由上圖可知，博客園的博文位於類名爲'post'的div中，外層是id名爲'topics'的div，而博文的標題位於類名爲'postTitle'的h1中。因此，當頁面結構加載完成後，就能夠在該標題的後面添加圖片了github

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

 

　　二、二維碼小圖生成瀏覽器

　　如今，須要準備一個二維碼小圖，插入博文標題後面app

　　經過iconfont，找到一個二維碼小圖，該小圖以下所示，由於是爲了方便移動端使用，因此使用了一個表示‘小手機’的圖標函數

　　而後將對該圖片進行base64編碼post

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);

 

　　三、將該網頁的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>

　　生成以下圖所示的二維碼圖片

　　四、動態生成及鼠標點擊事件

　　因爲最終是要封裝在一個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;    
}

 

　　五、移動端優化

　　因爲該功能只適用於電腦端，在移動端並沒有實際的用處。因此，能夠經過用戶代理檢測，若是是非移動端，才執行上述操做

　　因爲其餘的插件也可能會用到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;                
        })
    }
})();
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程