原文鏈接：https://www.whongbin.cn/index/article/detail/id/34.html
題外話
之前在開發(fā)公司官網(wǎng)的時候藐石，發(fā)現(xiàn)一個比較嚴(yán)重的問題滞诺，官網(wǎng)的logo，banner婉烟，二維碼等重要圖片，在移動端閱讀時居然都失真了 [aru_21]暇屋，原來似袁，在移動端訪問時，瀏覽器會自動壓縮圖片，從而導(dǎo)致失真昙衅。后來扬霜，我才發(fā)現(xiàn)居然還有一種
.svg格式的圖片。而涉。著瓶。[aru_9]，于是乎婴谱，問題就這樣解決了蟹但。
近日，在我的博客中添加了一個小功能谭羔，就是可以掃描本頁二維碼到手機上進(jìn)行閱讀了华糖，二維碼是使用js生成的svg格式，這篇文章就進(jìn)行分享一下
代碼
注意：使用時請先加載
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');
//當(dāng)前頁鏈接
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);
}
//鼠標(biāo)移入展示二維碼
function showImg(){
document.getElementById("divImg").style.display='block';
}
//鼠標(biāo)移出隱藏二維碼
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_嘻嘻]
