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

Posted 2021-02-12 魏杨杨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地相关的知识，希望对你有一定的参考价值。

由于客户的需求，将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内的内容转化为图片保存到本地的主要内容，如果未能解决你的问题，请参考以下文章

在 ASP.NET MVC Core 3.1 中通过 jQuery 为部分视图附加 html 的问题

在 Asp.net 中通过 Word doc 自动填写 Web 表单

asp.net中通过post的方式导出文件操作。

asp.net中通过单例保存全局参数

如何通过js跨域调用ASP.NET Web API （请问如何实现在javascript中通过http get的方式跨域调用ASP.NET Web API？）

在 ASP.NET 4.5 WebForms 中通过 bundle.config 与 BundleConfig.cs 捆绑资源