由于客户的需求，将js写出来的一个统计能够保存到本地。作为码奴的我只能慢慢搬砖咯！一开始使用的是html2canvas.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自带的照片查看器看着会模糊 不知道是我个人电脑的问题还是都是这个问题
看着就这种。
用附件中的画画和其他工具打开又没有什么问题
下了班等下回去家里的电脑看看！
Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地
原文地址：https://www.cnblogs.com/w5942066/p/10485263.html