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);
});

问题解决

h5实现海报分享功能相关推荐

海报分享功能实现详解
前言由于业务需求,需要做一个卡片分享功能,前期做了一些预研,实现类似效果可以采用如下两种方式: 采用ViewPager实现采用RecyclerView实现由于RecyclerView自带复用设计 ...
H5 webapp 实现分享功能
HBuilder webapp 实现分享功能在webapp要实现分享首要需要去社区开放平台进行申请腾讯开放平台:https://open.tencent.com/ 在腾讯开放平台上的QQ与微信开放 ...
WordPress文章海报分享WP-Poster插件源码
介绍: 不知何时起,WordPress很多博客/站点都用上了海报分享功能,个人觉得这个功能其实是可有可恶的,但是不可否认是个很炫酷的分享功能,对于网站/博客前期对外宣传还是有些帮助. 今天分享一款由x ...
h5 java实现微信分享_WebApp实现微信分享功能
利用hbuilder的分享功能 hbuilder下载地址http://www.dcloud.io/hbuilderx.html 该功能前端使用vue进行的编写 h5去除js下的 export defa ...
H5手机移动端调起浏览器自带分享功能实例（QQ、UC浏览器微博、微信分享）
H5手机移动端调起浏览器自带分享功能实例(QQ.UC浏览器微博.微信分享) 注:代码需要在服务器或测试服务器上方可看到效果 HTML: <span class="viewshare w ...
微信公众号h5的分享功能
微信公众号h5的分享功能配置如下: 微信配置 wx.config({debug,appId,timestamp,nonceStr,signature,jsApiList: ['onMenuShareA ...
Android微信h5分享,H5网页实现微信分享功能
H5网页实现微信分享功能一,首先在公众号管理后台"公众号设置"的"功能设置"里填写JS接口安全域名,域名需要通过ICP备案,没有备案域名可以用SAE.BAE等 ...
小程序一键分享html5,H5手机网站封装微信小程序并实现分享功能的教程
通过本文教程可以实现将H5手机网站直接封装成微信小程序,并且支持分享功能.但不支持微信支付功能. 说明:手机站域名必须开启https模式第一步: 微信开发者工具中创建小程序,填写你自己的小程序App ...
微信H5页面隐藏点击右上角的分享功能
微信H5页面隐藏点击右上角的分享功能注:H5页面右上角的三个点是微信自带的,所以不能去掉,只是可以隐藏点击后的分享功能右上角分享功能的显示与隐藏 <script>// 隐藏docume ...
H5手机页面调起浏览器自带分享功能实例（QQ、UC浏览器微博、微信分享）
H5手机页面调起浏览器自带分享功能实例(QQ.UC浏览器微博.微信分享) HTML: <span class="viewshare wx" data-mshare=" ...

h5实现海报分享功能

背景

实现效果

代码实现

h5实现海报分享功能相关推荐

最新文章

热门文章