Use JavaScript to generate a QR code image of the current post address

Previous words

Find a good blog post on the computer and want to access it on your phone. At this point, you must open the phone browser to enter a long URL to the line, very inconvenient. If the blog after the title with a small picture, click on the picture, there appears a large map of the two-dimensional code, and then sweep through the mobile phone, to carry out the blog access, it is relatively convenient.

Search through the search engine to generate two-dimensional code of the article, found that it is not an easy task. At the same time, QRCode plug-in was found, which is specially used to generate QR code. So, on the basis of QRCode, realized a QR code plugin

Effect Demo

If you are careful, you will notice that the post title is followed by a small icon that represents the QR code of a mobile phone. Click on the icon, a large map of the two-dimensional code, through the mobile phone scan, you can make mobile phone-side access to the Web. Then click the small icon or QR code image, the QR code picture disappears

I named the plugin qr.js, which is very simple to use, as long as the following introduction can be

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

Principle explanation

1, first analysis of the blog garden HTML structure

It is known that the blog post is located in the class called ' post ' div, the outer layer is the ID named ' Topics ' Div, and the title of the blog is in the class named ' Posttitle ' in the H1. So, when the page structure is loaded, you can add a picture after the title

var OBox = document.getElementById (' topics '); var otitle = Obox.getelementsbytagname (' h1 ') [0];console.log ( otitle.innerhtml);         

2, two-dimensional code small graph generation

Now, you need to prepare a QR code, inserted behind the post title

Through the Iconfont, find a QR code, the small figure is shown below, because it is for the convenience of mobile use, so the use of a "small phone" icon

The image will then be Base64 encoded

data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8/9haaaaokleqvq4t+2t4q2cmbcfv27cbjgcg+ gijaaboaijoijs4ai6grvibpjxxcop19t/ 8pjlotnexcj3ah91wav4bu68xwxoaz2ezeame9awtb6aelrdyaax9zgh0we4atczctdie7wl0oe7wx/ 8rmhigfqtb3fddm1ievyyondiveosqdwcy2z2nas/unbqmsqmvauuplfbnkpbsdtuvyxss/xyblrcnbg20i28aaaaaelftksuqmcc

By viewing the style, the skin used has the margin attribute set on the IMG header, as shown below

So, here's what you need for 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 "; o Img.style.margin = ' 0 '; otitle.appendchild (oimg);        

3. Convert the URL of the webpage to a QR code

Getting the URL is simple, as long as you use the href attribute of the Location object to

Next, you will use the QRCode plugin to convert the URL to a QR code function, first download the Qrcodejs plug-in, and then convert the URL of the post to a custom size QR code

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

Generate a picture of the QR code as shown

4. Dynamic generation and mouse click events

Since it is ultimately encapsulated in a JS file, the HTML structure involved in the third step needs to be dynamically generated

Since the generation of QR codes requires a dependency on the Qrcodejs plug-in, it is only possible to perform subsequent operations once the plug-in is loaded. The script tag supports the Load event, but is not compatible with the Ie8-browser. So, the safer way is to use window.onload

Click on the mouse to identify the image, on the right side of the logo image to display the generated QR code image, because the QR code image to the absolute location of the image, so you need to change the HTML structure, in the small logo image of the outer layer to add a oimgbox div, used to locate the large QR code image

Get post title var OBox = document.getElementById (' topics '); var otitle = Obox.getelementsbytagname (' h1 ') [0];// Create logo image and outer wrapper divvar 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);    Insert the logo picture into the title otitle.appendchild (Oimgbox); Dynamically generate a script tag, introducing QRCode plugin var script = document.createelement ("script"), Script.type = "Text/javascript"; script.src = ' Http://files.cnblogs.com/files/xiaohuochai/qrcode.min.js ';d ocument.body.appendChild (script);//dynamically Generate div tags, For placing a large map of the QR code generated by the QRCode plug-in, the default hidden displayShow 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}); }//the mouse over the outer oimgbox of the identity picture, a QR code picture is displayed on the right side of the image Oimgbox.onclick = function () {///If Mark is true, the QR code picture is being displayed, hiding if (odiv.ma    RK) {ODiv.style.display = ' none ';    Otherwise, the QR code image is being hidden, showing it}else{oDiv.style.display = ' block ';    }//marks the mark with anti-odiv.mark =!odiv.mark; }

5. Mobile-Optimized

Since this function is only available on the computer side, there is no practical use on the mobile side. Therefore, can be detected through the user agent, if the non-mobile side, do the above operation

Because other plugins may also use window.onload, use the Compatibility event handler function to avoid conflicts

The final code after optimization is as follows

(function () {///event handler compatible notation function addevent (target,type,handler) {if (Target.addeventlistener) {tar        Get.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[' $ ']; }}//If it is non-mobile, execute the following code if (!whichmobile ()) {//Get post title var OBox = document.getElementById (' topics ')        ;        var otitle = obox.getelementsbytagname (' h1 ') [0];        Create logo image and outer wrapper 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);            Insert the logo picture into the title otitle.appendchild (Oimgbox);        Dynamically generate the script tag, introducing the QRCode plugin var script = document.createelement ("script");        Script.type = "Text/javascript";        SCRIPT.SRC = ' http://files.cnblogs.com/files/xiaohuochai/qrcode.min.js ';        Document.body.appendChild (script);        Dynamically generated div tags for placing a large map of the two-dimensional code generated by the QRCode plug-in, the default hidden display 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:                          HEIGHT:80}); })//mouse over the logo image after the outer oimgbox, on the right side of the logo to display a two-dimensional code picture addevent (Oimgbox, ' click ', function () {///If Mark is true, the QR code picture is            In the display, hide it if (odiv.mark) {oDiv.style.display = ' none ';            Otherwise, the QR code image is being hidden, showing it}else{oDiv.style.display = ' block ';                        }//marks the mark with anti-odiv.mark =!odiv.mark; })    }})();

Use JavaScript to generate a QR code image of the current post address