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

发布时间:2023-05-19 19:00

这段做了一个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端

h5页面使用html2canvas实现分享海报_第1张图片h5页面使用html2canvas实现分享海报_第2张图片

 

 

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

     h5页面使用html2canvas实现分享海报_第3张图片 h5页面使用html2canvas实现分享海报_第4张图片

 

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

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

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

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

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

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号