h5实现海报分享功能

背景

由于项目需求，需要在h5实现类似于淘宝店铺分享的效果

实现效果

代码实现

介绍下使用插件及主要功能代码
html2canvas.js

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!h4>
div>

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

实现起来很简单，将指定HTML通过插件生成canvas，这里我做的是微信的分享，还需要增加一步，将canvas转成base64引入img标签路径

html2canvas($('.good_friend_container')[0]).then(canvas => {
var img = $('+canvas.toDataURL('image/png')+'" />')
	var $mask = $('
');
	$mask.find('.maskContainer').append(img);
	$('body').append($mask);
});

问题解决