Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地

# 微信 2024-05-05 12:54 0 50 来源：云博客

由于客户的需求，将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>