Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地
程序员文章站
2022-05-25 18:41:21
由于客户的需求，将js写出来的一个统计能够保存到本地。作为码奴的我只能慢慢搬砖咯！一开始使用的是html2canvas.js。功能是可以实现，但是有缺陷。话不多说开始搞！ 1、引入几个JS库 ①：jquery 版本还没试过我用的是3.1.1 （不贴链接了，这个要找很容易） ②：dom-to-imag ......
由于客户的需求，将js写出来的一个统计能够保存到本地。作为码奴的我只能慢慢搬砖咯！一开始使用的是功能是可以实现，但是有缺陷。话不多说开始搞！
1、引入几个js库
①：jquery 版本还没试过我用的是3.1.1 （不贴链接了，这个要找很容易）
②：dom-to-image.js （ 下载下来解压开在src目录里面）
③：filesaver.js （点击下载 下载下来解压开在src目录里面）
2、新建html引入第一步中的几个库
3、生成图片
3.1、生成png图片
<script>
var jd= document.getelementbyid('标签id');
domtoimage.topng(jd)
.then(function (url) {
var img = new image();
img.src = url;
document.body.appendchild(img);
})
.catch(function (e) {
console.log('生成图片出错', e);
});
</script>
3.2、生成下载图片
//保存图片
$("#btntoimg").click(function () {
domtoimage.toblob(document.getelementbyid('chartdiv'))
.then(function (blob) {
window.saveas(blob, 'imgname.jpg');
});
});
我写的是一个按钮的安吉事件
3.3、生成jpeg图片
domtoimage.tojpeg(document.getelementbyid('chartdiv'), { quality: 0.95 })
.then(function (dataurl) {
var link = document.createelement('a');
link.download = 'imgname.jpeg';
link.href = dataurl;
link.click();
});
使用的额时候只要调方法就可以了
下面贴上demo源码
<html>
<head>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript" src="dom-to-image.js"></script>
<script type="text/javascript" src="filesaver.js"></script>
<script type="text/javascript">
$(function () {
$("#btnsave").click(function () {
// 下载png图片
domtoimage.toblob(document.getelementbyid('dvmain'))
.then(function (blob) {
window.saveas(blob, '123.png');
});
});
});
</script>
</head>
<body>
<input type="button" id="btnsave" value="保存图片" />
<div id="dvmain">
<h1>123456789</h1>
<h2>h2h2h2</h2>
<p>段落里面的内容</p>
<span>span里面的内容</span>
<table id="table" border="1" style="width:200px;border-collapse: collapse;border:1px solid black; width:80%;">
<tr>
<td rowspan="3">111</td>
<td>222</td>
<td>333300</td>
</tr>
<tr>
<td rowspan="2">444</td>
<td>555</td>
</tr>
<tr >
<td>666</td>
</tr>
<tr>
<td rowspan="3">77</td>
<td>888</td>
<td>999</td>
</tr>
<tr >
<td>000</td>
<td>qqq</td>
</tr>
<tr>
<td>www</td>
<td>eee</td>
</tr>
</table>
</div>
</body>
</html>
中间表格中海油跨行跨列的都没有什么问题。
4、问题:
我现在是弄好了保存成png或者是jpg的时候用win10 系统自带的windows自带的照片查看器看着会模糊 不知道是我个人电脑的问题还是都是这个问题
看着就这种。
用附件中的画画和其他工具打开又没有什么问题
下了班等下回去家里的电脑看看！