zoukankan      html  css  js  c++  java
  • 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="200px;border-collapse: collapse;border:1px solid black; 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自带的照片查看器看着会模糊 不知道是我个人电脑的问题还是都是这个问题

    看着就这种。

    用附件中的画画和其他工具打开又没有什么问题

    下了班等下回去家里的电脑看看!

  • 相关阅读:
    Flutter form 的表单 input
    FloatingActionButton 实现类似 闲鱼 App 底部导航凸起按钮
    Flutter 中的常见的按钮组件 以及自 定义按钮组件
    Drawer 侧边栏、以及侧边栏内 容布局
    AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换 通过TabController 定义TabBar
    清空路由 路由替换 返回到根路由
    应对ubuntu linux图形界面卡住的方法
    [转] 一块赚零花钱
    [转]在树莓派上搭建LAMP服务
    ssh保持连接
  • 原文地址:https://www.cnblogs.com/w5942066/p/10485263.html
Copyright © 2011-2022 走看看