微信H5页面生成图片并长按下载

首先需要一JS插件 html2canvas 下载地址：http://html2canvas.hertzen.com/

引入html2canvas.min.jsj 

$(".btnCard").click(function(){
	$('#index,#answer').hide(); //为了显示图片这里隐藏了其它元素
	html2canvas(document.getElementById('complete')).then(function(canvas){
		$("#complete").hide(); //隐藏其它元素
		var img = new Image;
		img.src = canvas.toDataURL('image/png');
		$('.down').append(img);
	});
});

HTML代码部分：

.......
.......

html2canvas会将指定的元素内容生成一个canvas，可以是body,也可以是某个div根据你的需求来设置就可以了。然后将canvas显示到img标签中，在微信中如果不放到img标签中，canvas长按是没有效果的。注意在使用html2canvas时有可能在运行的时候页面有可能会错位，而导致生成的图片和原显示效果不一致。

我就遇到了这样的问题，所以我将页面前面没有用的dom都给隐藏掉，然后再去调用 html2canvas来生成图片。

经测试Androd 没有问题 MI9 微信7.0.6 可正常使用。IOS 12.4 微信7.0.5 可正常使用。