Don't forget that you have had a dream

    

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

先扯一扯题外话,之前在开发公司官网的时候,发现一个比较严重的问题,官网的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>

使用效果

https://file.whongbin.com/blog/img20190430114936.png

您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!
所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 知识共享许可协议 进行许可。

评论已关闭

  更新日志

博客banner下方滚动文字替换为使用 一言API 随机获取 --- updated on 2019-05-22 09:04:31 星期三

  关于博主

三里林,一个致力于分享,分享心得,分享技术,分享知识点的个人博客

  近期评论

  分类目录

真正的惩罚是会留在心和记忆里面的。

生活中若没有朋友,就像生活中没有阳光一样。

只要是亲生父母,除非你去犯罪,否则你干什么他们不支持你呢。

扣首问路,码梦为生

傲骨几锉尽 惟立仇心 十方雷霆乍起 振紫衣

H什么的最讨厌了!

如果说,有上帝的话。人类一思考,上帝就发笑,如果人类不思考,上帝连发笑都不屑于。

你眼中的星海灿烂 是我不曾见过的世外桃源