H5利用html2canvas生成带二维码的分享海报

本文介绍了如何结合html2canvas和qrcode.js库在H5页面中生成带有分享者信息的二维码海报。首先,通过qrcode生成包含用户OPENID的二维码;然后,利用html2canvas将指定区域内容转化为canvas并合成海报。在用户滚动到页面顶部后,生成海报并显示。该方法简单易行,适用于H5页面个性化分享。
摘要由CSDN通过智能技术生成

相信朋友们一定遇到过类似问题,为了分享美观,H5要生成一个带分享者信息的二维码的海报。具体实现可以借助于html2canvas及qrcode完成此功能。

第一步生成当前页面的二维码,页面包含用户分享OPENID参数;

<script type="text/javascript" src="qrcode.min.js"></script>

//生成二维码
var qrcode = new QRCode(document.getElementById("qrcodeCanvas"), {
	text: 'http://..../{$mybanshu.id}',
	width: 146,
	height: 146,
	colorDark: '#000000',
	colorLight: '#ffffff',
	correctLevel: QRCode.CorrectLevel.H
});

text:即为生成二维码的URL可加参数,这代码的意思就是生成一个text为内容的二维码大小是146X146 生成后存放在id为qrcodeCanvas的容器里面。

第二步利用html2canvas把指定ID(haibao)区域内的信息转化为canvas合成海报并展示在ID为CANVAS的DIV里面,因为haibao这个层是放FIXED在一个用户看不到的区域,不能隐藏。当用户拉了滚动条时,生成的海报会有一部分空白,所以当用户点击生成海报的时候要确保浏览器滚动条处于最上方,生成后再滚动到之前的位置。

//生成海报
		    function Creathb(){	    	
			    qim=new Image();//新建一个图片; 
			    qim.src=$("#hbtu").attr('src');//图片地址是你准备要加载的地址; 
			    var stop = $(document).scrollTop();
			    //先计算滚动高度再滚动到顶部
			    $("body,html").animate(
		          {
		            scrollTop: 0
		          },
		          0
		        );
			    if(qim.complete){
			    	new html2canvas(document.getElementById('haibao'), {
					  allowTaint: true,
					  useCORS: true,
					}).then(canvas => {
					    let oImg = new Image();
					    oImg.src = canvas.toDataURL();  // 导出图片
					    //document.body.appendChild(oImg);   将生成的图片添加到body
					    $(".canvas").html("");
					    $(".canvas").append(oImg)
					    console.log(oImg)
				    });
			    } 
			    //生成完成后滚动到原来位置
			    $("body,html").animate(
		          {
		            scrollTop: stop
		          },
		          0
		        );
		    }
		    //点击按钮出发生成海报动作
		    $(".creat").click(function(){
		    	Creathb();
		    	setTimeout(function () { 
		    		$(".home5").hide();
					$(".canvas,.mengban,.close,.taps").show();
				}, 2000); // 延时2秒
		    })

至此,生成海报的功能完成了,有没有很简单。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值