JS生成二維碼

效果

掃描二維碼可訪問指定鏈接或當(dāng)前網(wǎng)站鏈接,內(nèi)容可以自己更改
"復(fù)制鏈接",點(diǎn)擊按鈕復(fù)制當(dāng)前網(wǎng)站鏈接
如何獲取當(dāng)前網(wǎng)站鏈接

源碼

textarea{
opacity: 0;
	/*display: none;*/
	z-index: -999;
}
button{
	margin-left: -90px;
	border: 1.5px solid #000;
	padding: 3px 8px;
	font-size: 24px;
}

<div class="shareBox">
	<span id="qrcode" onclick="download()"></span>
	<div id="qrcodeWord" onclick="copyHref()" onclick="copyHref()">
	   <textarea id="inputTextarea"></textarea>
	   <button>復(fù)制鏈接</button>
	</div>
</div>

//生成二維碼
qrcode = new QRCode(document.getElementById("qrcode"), {
	text: document.location.href,//鏈接地址
	width : 300,//二維碼寬高
	height : 300,
	colorDark : "#000000",//二維碼前景色
    colorLight : "#fff",//二維碼背景色
    correctLevel : QRCode.CorrectLevel.H
});

生成當(dāng)前網(wǎng)站鏈接的二維碼

text: document.location.href
document.location.href就是獲取當(dāng)前網(wǎng)站的鏈接

當(dāng)然也可以自己更改二維碼

text: "自己想要的鏈接"
text: "https://MrFlySand.github.io"

//點(diǎn)擊二維碼下載圖片
function download(){
	var data = $("canvas")[0].toDataURL().replace("image/png", "image/octet-stream;");//獲取二維碼值，并修改響應(yīng)頭部。　　　
	var filename='blog-'+document.title+'.png';//保存的圖片名稱和格式，canvas默認(rèn)使用的png格式。這個(gè)格式效果最好。
	var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
	save_link.href = data;
	save_link.download = filename;
	var event = document.createEvent('MouseEvents');
	event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	save_link.dispatchEvent(event);
}
//復(fù)制當(dāng)前網(wǎng)站鏈接
 function copyHref(){ 
   var input = document.getElementById("inputTextarea");
   input.value = document.location.href; // 修改文本框的內(nèi)容
   input.select(); // 選中文本
   document.execCommand("copy"); // 執(zhí)行瀏覽器復(fù)制命令
   alert("復(fù)制成功
(點(diǎn)擊下載二維碼或使用手機(jī)瀏覽器設(shè)置成桌面版顯示可以轉(zhuǎn)發(fā)二維碼)");
}

請(qǐng)支持正版,文章都是免費(fèi)。防侵權(quán),原作者博客MrFlySand
以上代碼要先引入JQuery和qrcode

<script src="jquery.min.js"></script>
<script src="qrcode.min.js"></script>

JQuery
復(fù)制源碼
qrcode
復(fù)制源碼

---

❤️有則改之，無則加勉。如有錯(cuò)誤、建議、疑問，評(píng)論或聯(lián)系飛沙QQ：2602629646
❤️本文來自作者：MrFlySand，轉(zhuǎn)載請(qǐng)注明原文鏈接：https://www.cnblogs.com/MrFlySand/p/15014751.html

總結(jié)

以上是生活随笔為你收集整理的JS生成二维码以及点击下载二维码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。