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自带的照片查看器看着会模糊 不知道是我个人电脑的问题还是都是这个问题

    看着就这种。

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

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

  • 相关阅读:
    e667. 在给定图像中创建缓冲图像
    e661. 确定图像中是否有透明像素
    e673. Getting Amount of Free Accelerated Image Memory
    e663. 在gif图像中获取透明和色彩的数量
    e662. 取的图像的色彩模型
    e675. 翻转缓冲图像
    e665. 在图像中过滤三元色
    e679. 浮雕化图像
    e669. 绘制缓冲图像
    e664. 在图像中获取子图像
  • 原文地址:https://www.cnblogs.com/w5942066/p/10485263.html
Copyright © 2011-2022 走看看