<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) {
var myBlob = dataURLtoBlob(canvas.toDataURL('img/png', 0.92))
myUrl = URL.createObjectURL(myBlob)
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) {
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');
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/320101f3f8bc9aec34208ba11a4cfead.png#pic_center)