h5页面使用html2canvas实现分享海报

这段做了一个nft数藏类项目，h5版本里需要实现一个分享海报的功能，总结如下。

功能简单来说就是，使用html2canvas生成海报图片，在pc端可以显示下载按钮可以下载海报，在手机端可以使用手机浏览器的分享图片或保存图片功能，从而实现将海报分享到微信里。

实现思路是：先组装要生成海报的div，然后显式弹出div，下面给出“我要分享”按钮，点击按钮用html2canvas绘图生成此div的海报图片，将海报图片覆盖至原div，pc端显示下载按钮，手机端提示长按图片使用分享或者保存功能。

1. html2canvas是基于h5的canvas绘图插件，网上用到还是比较多的，如果你组装的div模板里包含图片，用html2canvas绘出海报可能会发现图片为空白，这算是一个坑。我查了网上最后写法如下：

html2canvas(document.querySelector("#share-content" + orderNo), {useCORS: true,scrollY: 0,scrollX: 0,allowTaint: true
}).then(function(canvas) {$scope.canvas = canvas;var img = new Image()img.src = canvas.toDataURL('image/jpeg');$('#share-content' + orderNo).html(img);// 分享按钮隐藏，下载按钮显示$("#pcShareBtn").attr("style", "display:none")$("#pcCloseShareBtn").attr("style", "display:none")$("#downLoadShareBtn").attr("style", "margin-top:5px;margin-right:10px;")$("#pcCloseShareBtn1").attr("style", "margin-top:5px;margin-right:10px;")});

share-content就是div，html2canvas绘出canvas对象，然后转成img对象，覆盖到原div。

2. pc端点击分享按钮后，出现下载海报按钮，其实就是模拟一个超链接a的点击事件，然后使用浏览器下载

$scope.downloadShare = function (){var data = $scope.canvas.toDataURL().replace("image/png", "image/octet-stream;");var filename="专属海报.png";// 保存的图片名称和格式，canvas默认使用的png格式。这个格式效果最好。var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');save_link.href = data;save_link.download = filename;var event = document.createEvent('MouseEvents');event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);save_link.dispatchEvent(event);
}

3. 手机浏览器只需要绘出海报，然后提示用户长按分享或保存。

整体效果如下：

pc端

手机端（长按图片用浏览器自带的分享功能）

第一张和第二张其实是一样的，区别在于第一张是div，第二张是html2canvas绘出的img，这里其实是多了一步操作，我本来想一步实现，就是绘出一个隐藏的div接着直接用html2canvas画出img，但是貌似html2canvas只能根据页面目前显示的html元素绘图，所以只能先点击看到div，然后点“我要分享”再实现绘图。

另外开发中还遇到的两个小问题：

1. 就是手机端利用浏览器分享或者保存海报经测试后，大部分是可以的，但是在qq浏览器和uc浏览器山上会有不同的显示bug，网上找到有个mshare.js插件，是直接可以唤醒拉起微信分享的。

2. 在海报弹出框，如果用户点击关闭操作，这时候是需要有一步从img还原到html div的操作的，太麻烦了，我项目里直接reload了整个页面。

3. 二维码可以找网上现成插件，我用的是qrcode.min.js，需要注意生成二维码的信息长度越长，二维码的密度就越大，这时候需要放大二维码大小，不然很难识别

h5页面使用html2canvas实现分享海报相关推荐

CRMEBV4小程序H5页面端宝贝列表分享海报以及会员中心分销推广不显示的常见问题解决
上次给大家带来了CRMEB标准版和基础版分享海报不显示的问题,这里再此做一个补充,还未看之前的帖子,请先看,如果不能解决再对照本方法处理, 上次的方法:https://blog.csdn.net/id ...
VUE H5页面微信/QQ/微博分享连接设置
VUE H5页面微信/QQ/微博分享连接设置问题想改变分享的标题.副标题.图片以及重定向打开的地址? 解决第一步:在项目控制台里面 npm i -S weixin-js-sdk ( 然后视情况 ...
html(h5)页面实现微信js分享
html(h5)页面实现微信js分享注:并非所有代码原创服务端实现签名等因为引用了第三方dll,所以需先添加nuget包,这个包直接在nuget管理器中搜索不到,在pm控制台输入如下内容:也 I ...
在H5页面中禁止微信分享转发按钮-mugeda
在H5页面中禁止微信分享转发按钮(mugeda) 在页面脚本中插入以下代码方法一: 加一段js代码 document.addEventListener('WeixinJSBridgeReady', ...
在H5页面中禁止微信分享转发按钮
在H5页面中禁止微信分享转发按钮(mugeda) 在页面脚本中插入以下代码方法一: 加一段js代码 document.addEventListener('WeixinJSBridgeReady', ...
H5页面使用html2canvas实现div生成为图片，保存到手机
在做微信公众号H5页面时,需求要求html页面生成base64图片,并保存到手机相册中.之前没做过,在网上搜了相关的资料.了解到了html2canvas.js. html2canvas首先将页面生成c ...
h5页面在微信内部分享
今天自己写了一个微信分享的功能,可以说遇到了很多坑,但最好还是顺利完成了,分享给大家,让大家少爬一点坑 1.引用js: <script type="text/javascript&qu ...
微信H5页面用Html2canvas生成图片的几种方式
Demo:仅供参考,实际业务场景请根据自己的需求修改(本案例提供的是思路和实现方式) <!DOCTYPE html> <html> <head><meta c ...
uc浏览器、QQ浏览器的h5页面，点击分享按钮，分享到微信、qq、微博
github项目地址: https://github.com/JefferyWang/nativeShare.js 使用方法 //引入CSS <link rel="stylesheet ...

h5页面使用html2canvas实现分享海报

h5页面使用html2canvas实现分享海报相关推荐

最新文章

热门文章