JS生成二维码以及点击下载二维码

时间:2021-07-15
本文章向大家介绍JS生成二维码以及点击下载二维码,主要包括JS生成二维码以及点击下载二维码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

JS生成二维码

  • 效果
  • 扫描二维码可访问指定链接或当前网站链接,内容可以自己更改
  • "复制链接",点击按钮复制当前网站链接
  • 如何获取当前网站链接

源码

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>复制链接</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
});
  • 生成当前网站链接的二维码
    • text: document.location.href
    • document.location.href就是获取当前网站的链接
  • 当然也可以自己更改二维码
//点击二维码下载图片
function download(){
	var data = $("canvas")[0].toDataURL().replace("image/png", "image/octet-stream;");//获取二维码值,并修改响应头部。   
	var filename='blog-'+document.title+'.png';//保存的图片名称和格式,canvas默认使用的png格式。这个格式效果最好。
	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);
}
//复制当前网站链接
 function copyHref(){ 
   var input = document.getElementById("inputTextarea");
   input.value = document.location.href; // 修改文本框的内容
   input.select(); // 选中文本
   document.execCommand("copy"); // 执行浏览器复制命令
   alert("复制成功\n(点击下载二维码或使用手机浏览器设置成桌面版显示可以转发二维码)");
}
<script src="jquery.min.js"></script>
<script src="qrcode.min.js"></script>

❤️有则改之,无则加勉。如有错误and建议联系QQ:2602629646
❤️本文来自作者:MrFlySand,转载请注明原文链接:https://www.cnblogs.com/MrFlySand/p/15014751.html

❤️【推荐】计基练习题

原文地址:https://www.cnblogs.com/MrFlySand/p/15014751.html