由于客户的需求，将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内的内容转化为图片保存到本地的更多相关文章

  1. JS中的DOM对象及JS对document对像的操作

    DOM对象 windows:属性:opener(打开者) 方法:open().close(),setTimeout().setInterval()... location:属性:href 方法:rel ...

  2. java后台中处理图片辅助类汇总(上传图片到服务器,从服务器下载图片保存到本地,缩放图片,copy图片,往图片添加水印图片或者文字,生成二维码,删除图片等)

    最近工作中处理小程序宝箱活动,需要java画海报,所以把这块都快百度遍了,记录一下处理的方法,百度博客上面也有不少坑! 获取本地图片路径: String bgPath = Thread.current ...

  3. ASP.NET下载远程图片保存到本地的方法、保存抓取远程图片

    以下介绍两种方法:1.利用WebRequest,WebResponse 类 WebRequest wreq=WebRequest.Create("http://www.xueit.com/e ...

  4. 将ImageView中的图片保存到本地相冊

    private void SaveImageToSysAlbum() { if (FileUtil.isSdCardExist()) { BitmapDrawable bmpDrawable = (B ...

  5. 从文本中读取内容并把读取到的内容转化成二进制保存的形式（包含十进制数如何转换成二进制数dtob函数）

    #include<stdio.h> #include<string.h> #include<stdlib.h> #include<malloc.h> d ...

  6. 用ASP.NET实现下载远程图片保存到本地的方法 保存抓取远程图片的方法

    以下介绍两种方法:1.利用WebRequest,WebResponse 类WebRequest wreq=WebRequest.Create("http://files.jb51.net/f ...

  7. iOS9中将图片保存到照片中的某个相册的方法说明

    iOS9中将图片保存到照片中的某个相册的方法说明 在App中很经常遇到的就是用户点击某张图片后将图片保存到本地,下面介绍下iOS中保存图片的一些东西 1.首先,在iOS中把图片保存到系统照片是比较简单 ...

  8. 007.Adding a view to an ASP.NET Core MVC app -- 【在asp.net core mvc中添加视图】

    Adding a view to an ASP.NET Core MVC app 在asp.net core mvc中添加视图 2017-3-4 7 分钟阅读时长 本文内容 1.Changing vi ...

  9. 实例分析ASP.NET在MVC5中使用MiniProfiler监控MVC性能的方法 

    这篇文章主要为大家详细介绍了ASP.NET MVC5使用MiniProfiler监控MVC性能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 MiniProfiler ,一个简单而有效的迷你剖析器 ...

随机推荐

  1. java游戏开发杂谈 - 事件处理

    大家都知道,游戏需要跟玩家交互,需要接收玩家的鼠标.键盘发出的命令,比如在地图上点击一下,人物就自动寻路走过去:键盘上按下某个键,就弹出一个背包界面. 这些逻辑是怎么处理的呢? 大家先不用深究太详细的 ...

  2. Python：requests：详解超时和重试

    网络请求不可避免会遇上请求超时的情况,在 requests 中,如果不设置你的程序可能会永远失去响应.超时又可分为连接超时和读取超时. 连接超时 连接超时指的是在你的客户端实现到远端机器端口的连接时( ...

  3. Netty源码—六、tiny、small内存分配

    tiny内存分配 tiny内存分配流程: 如果申请的是tiny类型,会先从tiny缓存中尝试分配,如果缓存分配成功则返回 否则从tinySubpagePools中尝试分配 如果上面没有分配成功则使用a ...

  4. keil4编译Error: User Command terminated, Exit-Code = 1解决

    编译出错结果如下图: 通过分析可看出,错误原因是:调用fromelf.exe指令的路径不对.Keil中设置的是 E:\Keil\ARM\BIN40\fromelf.exe(安装Keil位置不同,此处显 ...

  5. hexo 报错 Cannot read property 'replace' of null

    详细错误信息: FATAL Cannot read property 'replace' of null TypeError: Cannot read property 'replace' of nu ...

  6. iOS可视化动态绘制八种排序过程(Swift版)

    前面几篇博客都是关于排序的,在之前陆陆续续发布的博客中,我们先后介绍了冒泡排序.选择排序.插入排序.希尔排序.堆排序.归并排序以及快速排序.俗话说的好,做事儿要善始善终,本篇博客就算是对之前那几篇博客 ...

  7. Python算法与数据结构--求所有子数组的和的最大值

    Python算法与数据结构--求所有子数组的和的最大值 玄魂工作室-玄魂 玄魂工作室秘书 玄魂工作室 昨天 题目:输入一个整形数组,数组里有正数也有负数.数组中连续的一个或多个整数组成一个子数组,每个 ...

  8. PHP全栈学习笔记10

    php常量,常量是不能被改变的,由英文字母,下划线,和数字组成,但是数字不能作为首字母出现. bool define ( string $name , mixed $value [, bool $ca ...

  9. java中并发下的集合类

    java中常见的集合类大部分是非线程安全的,在多线程情况下会报并发修改异常(ConcurrentModificationException) 并发下的ArrayList类: //集合类不安全的例子 p ...

  10. CMake安装grpc生成gRPCTargets.cmake文件

    以下是安装语句: cd grpc_folder git submodule update --init cmake .. make -j 4 sudo make install 然而编写依赖gRPC的 ...