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

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

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

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

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

//生成二维码
var qrcode = new ElementById("qrcodeCanvas"), {text: '..../{$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(qimplete){new ElementById('haibao'), {allowTaint: true,useCORS: true,}).then(canvas => {let oImg = new Image();oImg.src = DataURL();  // 导出图片//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秒})

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