web html2canvas生成图片下载

<script type="text/javascript" src="{DT_MOB}static/js/html2canvas.js"></script>
<script type="text/javascript" src="{DT_MOB}static/js/html2canvas.min.js"></script>

<div class="pop-main2" id="cardimg">
	<div>
		<div class="d-flex cardtop">
			<img src="{$thumb}" width="77" height="77" />
			<div class="cardtitle1">
				<div>{$title}</div>
				<span class="corange">￥{$price}</span>
			</div>
		</div>
		<p class="cardtitle">商品规格</p>
		<span class="cardspan">{$specs}</span>
		<p class="cardtitle">商品卖点</p>
		<span class="cardspan" >{$advantage}</span>
		<div class="cardbtn" onclick="takeScreenshot()">保存图片</div>
	</div>
</div>

	function takeScreenshot() {
		html2canvas(document.querySelector("#cardimg"), {
			useCORS: true,
		}).then(canvas => {
			convertCanvasToImg(canvas)
		})
	}
	function convertCanvasToImg(canvas) {
		// canvas转base64 转 blob
		var myBlob = dataURLtoBlob(canvas.toDataURL('img/png', 0.92))
		// blob转URL对象
		myUrl = URL.createObjectURL(myBlob)
		// 创建a标签，下载图片
		downImg(myUrl)
	}
	function dataURLtoBlob(dataurl) {
		var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
			bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
		while (n--) {
			u8arr[n] = bstr.charCodeAt(n);
		}
		return new Blob([u8arr], { type: mime });
	}
	function downImg(url) {
		// 创建a标签 并设置其相关属性，最后触发其点击事件
		let a = document.createElement("a")
		let clickEvent = document.createEvent("MouseEvents");
		a.setAttribute("href", url)
		a.setAttribute("download", 'codeImg')
		a.setAttribute("target", '_blank')
		clickEvent.initEvent('click', true, true)
		a.dispatchEvent(clickEvent);
		$(".pop-main2").css('display', 'none');
		$("#z-show").css('display', 'none');
	}