JavaScript生成本页二维码，右下角悬浮显示

原文链接：https://www.whongbin.cn/index/article/detail/id/34.html

题外话

之前在开发公司官网的时候，发现一个比较严重的问题，官网的logo，banner，二维码等重要图片，在移动端阅读时居然都失真了 [aru_21]，原来，在移动端访问时，浏览器会自动压缩图片，从而导致失真。后来，我才发现居然还有一种 .svg 格式的图片。。。[aru_9]，于是乎，问题就这样解决了。

近日，在我的博客中添加了一个小功能，就是可以扫描本页二维码到手机上进行阅读了，二维码是使用js生成的svg格式，这篇文章就进行分享一下

代码

注意：使用时请先加载 qrjs2.js 文件
https://www.whongbin.cn/static/index/js/qrjs2.js

//页面加载时就加载二维码
if (document.implementation.hasFeature("http://www.w3.org/2000/svg","1.1")) {
    var container = document.getElementById('divImg');
    //当前页链接
    u = window.location.href,
    s = QRCode.generateSVG(u, {
            ecclevel: "M",
            fillcolor: "#FFFFFF",
            textcolor: "#373737",
            margin: 2,
            modulesize: 8
        });
    var XMLS = new XMLSerializer();
    s = XMLS.serializeToString(s);
    //使用base64展示图片
    s = "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(s)));
    var pageEwm = document.getElementById('pageEwm');
    pageEwm.src = s;
    container.appendChild(pageEwm);
}

//鼠标移入展示二维码
function showImg(){ 
    document.getElementById("divImg").style.display='block'; 
} 
//鼠标移出隐藏二维码
function hideImg(){ 
    document.getElementById("divImg").style.display='none'; 
} 

<script type="text/javascript" src="https://www.whongbin.cn/static/index/js/qrjs2.js"></script>
<div id="nowpage-qrcode" title="手机阅读" class="headroom show headroom--not-top headroom--not-bottom headroom--pinned" onMouseOut="hideImg()" onmouseover="showImg()">
    <i class="fa fa-qrcode" aria-hidden="true">
    </i>
</div>
<div id="divImg" style="display:none;position:fixed;right:100px;bottom:100px;z-index:100000;padding:3px 3px 0px;border-radius:3px;border:1px solid rgb(221, 221, 221);background:#ffffff;box-shadow:0 0 6px rgba(14,22,30,.3);color:#373737;width:140px;text-align:center;">
    <code>手机扫码阅读</code>
    <img style="border: 0;max-width: 100%;" id="pageEwm" />
</div>

使用效果

• 具体使用效果请浏览本博客 [wb_嘻嘻]