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，需要注意生成二维码的信息长度越长，二维码的密度就越大，这时候需要放大二维码大小，不然很难识别