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

来源:http://www.cnblogs.com/xiaohuochai/archive/2017/05/19/6876551.html
-Advertisement-
Play Games

前面的話 在電腦端發現一篇好的博文，想在手機上訪問。這時，就必須打開手機瀏覽器輸入長長的URL地址才行，非常不方便。如果在博客標題的後面跟一張小的圖片，點擊該圖片後，出現一張二維碼的大圖，然後再通過手機掃一掃，來進行博文的訪問，就相對方便很多。 通過搜索引擎搜索了一些生成二維碼的文章，發現其並不是一 ...


前面的話

　　在電腦端發現一篇好的博文，想在手機上訪問。這時，就必須打開手機瀏覽器輸入長長的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;                
        })
    }
})();

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 使用AJAX非同步提交表單的幾種方式
    方式一 手工收集所有的用戶輸入，封裝為大的“k1=v1&k2=v2…”鍵值對形式，使用$.post(url, data,fn)把數據提交給伺服器 方式二 方式三 使用jQuery Form插件提供的ajaxSubmit()函數 轉載：http://blog.csdn.net/NextStand/ar ...
  • HTML5+CSS （簡易nav設計）
    HTML部分： <!DOCTYPE html><html> <head> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/moveCss.css" /> </head> <body> <nav id= ...
  • css 頁面特殊顯示效果
    1.移動端最小設置字體為12px，如果想要更小字體效果： -webkit-transform:scale(0.9); 2.文字超過兩行時，末尾顯示點點的效果： overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box ...
  • jqGrid使用json實現的範例一
    qGrid 是一個用來顯示網格數據的jQuery插件，通過使用jqGrid可以輕鬆實現前端頁面與後臺數據的ajax非同步通信。文檔比較全面，其官方網址為：http://www.trirand.com。 js引入 前端html代碼 jqgrid javascript代碼 url引入的json格式如下 通 ...
  • CSS3D動畫製作一個3d旋轉的篩子
    希望這個demo能讓大家理解CSS3的3d空間動畫(其實是個假3D) 首先給一個3d的解剖圖，x/y/z軸線軸線已經標出 下麵附上添加特效的動畫旋轉 可以根據demo並參考上面解剖圖進行理解 ...
  • art-template輔助函數和子模板
    art-template 前端使用 用途：主要用來處理數據和優化性能，與其他的一些模塊化處理數據的插件相比，art-template處理性能好 不廢話，上代碼 1.art-template基本語法使用 <script src="template.js"></script> //id為模塊的名稱 // ...
  • JavaScript BOM對象
    BOM:window 方法：3種彈窗；close();open();！！！計時函數！！！ 屬性：history，location，documenthistory 方法：history.forword();前進 history.back();後退 history.go(?);跳轉到歷史的哪個頁面loc ...
  • 必知的 15 個jQuery小技巧（乾貨）
    jQuery小技巧（幹活） 1.返回頂部按鈕 你可以利用 animate 和 scrollTop 來實現返回頂部的動畫，而不需要使用其他插件。 改變 scrollTop 的值可以調整返回距離頂部的距離，而 animate 的第二個參數是執行返回動作需要的時間(單位：毫秒)。 2.預載入圖片 如果你的 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類