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 = $('<img src="'+canvas.toDataURL('image/png')+'" />') var $mask = $('<div id="mask"><i class="order_close_icon canvasClose"></i><div class="maskContainer"></div></div>'); $mask.find('.maskContainer').append(img); $('body').append($mask); });

问题解决