原文链接：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_嘻嘻]
