一开始是用html2canvas
,发现满足不了需求。于是朋友推荐我用dom-to-image
引用<script src="https://cdn.bootcdn.net/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
演示代码
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
table {
width: 200px;
border-collapse: collapse;
border: 1px solid black;
}
tr {
background: green;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
</head>
<body>
<input type="button" onclick="saveImage()" value="保存图片" />
<table id="table">
<tr>
<td rowspan="3">200</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td rowspan="2">500</td>
<td>600</td>
</tr>
<tr>
<td>600</td>
</tr>
</table>
<script>
function filter (node) {
return !(/\bno-pic\b/.test(node.className))
}
function saveImage() {
$('.myqrcode .button').hide()
domtoimage.toPng(document.getElementById("myqrcode"), {filter: filter})
.then(function (dataUrl) {
var link = document.createElement("a");
link.download = "my-image-name.jpeg";
link.href = dataUrl;
link.click();
$('.myqrcode .button').show()
});
}
</script>
</body>
</html>
正文完
要饭中,多少给点吧(支付宝)