html2canvas页面生成图片

1.项目加入
html2canvas.min.js【官网】
2.html代码

<div class="ebtn" onclick="takeScreenshot()">导出</div>
<a id="saveImg"></a>
<div class="content">
	<div id="capture">
		生成图片的内容
	</div>
</div>

3.js代码

<script type="text/javascript">
	function takeScreenshot() {
		var canvas = document.querySelector("#capture");
		html2canvas(canvas,{
		    allowTaint: false,//是否允许跨域图像污染画布
		    useCORS: true//是否尝试使用CORS从服务器加载图像
		}).then(canvas => {
        	var ctx = canvas.getContext("2d");
        	//创建水印canvas
			const water = document.createElement('canvas');
			water.width = 450;
  			water.height = 280;
			const waterCtx = water.getContext('2d');
		  	waterCtx.font="30px Microsoft YaHei";
			waterCtx.rotate(-20*Math.PI/180);
			waterCtx.fillStyle = 'rgba(0, 0, 0, 0.1)';
          	waterCtx.fillText("水印水印水印水印",20,205);
          	//铺上去
			const pat = ctx.createPattern(water, 'repeat');
			ctx.fillStyle = pat;
			ctx.fillRect(0, 0, canvas.width, canvas.height);
		  	var imgUri = canvas.toDataURL("image/png");//图片格式
	    	//把url放到我们的a标签中，并得到a标签对象
	        var triggerDownload = $("#saveImg").attr("href", imgUri).attr("download", Math.random().toString(36).substr(2) + '.png'); 
	        triggerDownload[0].click();//模拟点击！
		});
	}
</script>