获取当前页面网址,并用此URL生成二维码,且将二维码固定在页面左下角

xq88 擎天论坛 关注 六级站长 普通
发表于其他技术文章版块

自带的当前页面二维码,需要点击才出现,然后再点击关闭,改了一下,将自带的功能关了,直接显示当前页面二维码,需要的拿走用。


将以下代码复制到需要显示的地方就行了,我的放在了模板文件中的广告位里面,你也可以放到foot里面,因为不管放在哪,他都在左下角出现。


如果不需要在左下角出现,想放别的地方,将<div id="qr" class="fixed-div"></div>放到你想让他出现的地方,并改为<div id="qr"></div>,或者自定样式。



<!--当前页面二维码-->
<div id="qr" class="fixed-div"></div>
<script src="https://qtxml.cn/tool/tuma/js/qrcode.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
			var currentUrl = window.location.href;
			var filter = 'threshold';
			var imagePath = 'img/1.jpg';

			var self = this;

			function makeQR() {
				var qr = qrcode.QRCode(10, 'H');
				qr.addData(currentUrl);
				qr.make();
				document.getElementById('qr').innerHTML = qr.createImgTag(3);
			}

			function makeQArt() {
				new QArt({
					value: value,
					imagePath: imagePath,
					filter: filter
				}).make(document.getElementById('combine'));
			}

			function getBase64(file, callback) {
				var reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = function () {
					callback(reader.result);
				};
			}

			$('#value').keyup(function() {
				value = $(this).val();
				makeQR();
				makeQArt();
			});

			$('#file').change(function() {
				getBase64(this.files[0], function(base64Img) {
					var regex = /data:(.*);base64,(.*)/gm;
					var parts = regex.exec(base64Img);
					imagePath = parts[0];
					$('#image img').attr('src', imagePath);
					makeQArt();
				});
			});

			$('input[type=radio]').click(function() {
				filter = $(this).val();
				makeQArt();
			});

			makeQR();
			makeQArt();
		});
</script>

<!--将二维码固定在左下角-->
  <style>
    .fixed-div {
	position: fixed;
	left: 0;
	bottom: 0;
	padding: 10px;
	background-color: #333;
	color: white;
}
  </style>
以上代码复制即可直接使用。



class="fixed-div"  //定义二维码样式

如果不需要将二维码固定在左下角,可以删除此段和样式代码。


效果可以看这里  https://qtxml.cn/read-719-1.html





评论列表 评论
发布评论

评论: 获取当前页面网址,并用此URL生成二维码,且将二维码固定在页面左下角

已有0次打赏
(0) 分享
分享

请保存二维码或复制链接进行分享

取消