H5利用html2canvas生成带二维码的分享海报_前端h5分享二维码功能-CSDN博客

本文链接：https://blog.csdn.net/qq_28471389/article/details/109363938

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

摘要由CSDN通过智能技术生成

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

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

//生成二维码
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秒
		    })

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