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内的内容转化为图片保存到本地的更多相关文章
- JS中的DOM对象及JS对document对像的操作
DOM对象 windows:属性:opener(打开者) 方法:open().close(),setTimeout().setInterval()... location:属性:href 方法:rel ...
- java后台中处理图片辅助类汇总(上传图片到服务器,从服务器下载图片保存到本地,缩放图片,copy图片,往图片添加水印图片或者文字,生成二维码,删除图片等)
最近工作中处理小程序宝箱活动,需要java画海报,所以把这块都快百度遍了,记录一下处理的方法,百度博客上面也有不少坑! 获取本地图片路径: String bgPath = Thread.current ...
- ASP.NET下载远程图片保存到本地的方法、保存抓取远程图片
以下介绍两种方法:1.利用WebRequest,WebResponse 类 WebRequest wreq=WebRequest.Create("http://www.xueit.com/e ...
- 将ImageView中的图片保存到本地相冊
private void SaveImageToSysAlbum() { if (FileUtil.isSdCardExist()) { BitmapDrawable bmpDrawable = (B ...
- 从文本中读取内容并把读取到的内容转化成二进制保存的形式(包含十进制数如何转换成二进制数dtob函数)
#include<stdio.h> #include<string.h> #include<stdlib.h> #include<malloc.h> d ...
- 用ASP.NET实现下载远程图片保存到本地的方法 保存抓取远程图片的方法
以下介绍两种方法:1.利用WebRequest,WebResponse 类WebRequest wreq=WebRequest.Create("http://files.jb51.net/f ...
- iOS9中将图片保存到照片中的某个相册的方法说明
iOS9中将图片保存到照片中的某个相册的方法说明 在App中很经常遇到的就是用户点击某张图片后将图片保存到本地,下面介绍下iOS中保存图片的一些东西 1.首先,在iOS中把图片保存到系统照片是比较简单 ...
- 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 ...
- 实例分析ASP.NET在MVC5中使用MiniProfiler监控MVC性能的方法
这篇文章主要为大家详细介绍了ASP.NET MVC5使用MiniProfiler监控MVC性能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 MiniProfiler ,一个简单而有效的迷你剖析器 ...
随机推荐
- 处女作《Web全栈开发进阶之路》出版了!
书中源码下载地址:https://github.com/qinggee/WebAdvanced 01. 当初决定写博客的原因非常的纯洁:只要每个月写上 4 篇以上博客,月底的绩效奖金就多 500 块. ...
- go语言调度器源代码情景分析之二:CPU寄存器
本文是<go调度器源代码情景分析>系列 第一章 预备知识的第1小节. 寄存器是CPU内部的存储单元,用于存放从内存读取而来的数据(包括指令)和CPU运算的中间结果,之所以要使用寄存器来临时 ...
- 干货|一个案例学会Spring Security 中使用 JWT
在前后端分离的项目中,登录策略也有不少,不过 JWT 算是目前比较流行的一种解决方案了,本文就和大家来分享一下如何将 Spring Security 和 JWT 结合在一起使用,进而实现前后端分离时的 ...
- springboot中HandlerMethodArgumentResolver的使用
springboot项目中在所有的controller方法中想增加token验证,即所有的方法都必须登陆有token之后才能访问.springboot封装了SpringMVC中的HandlerMeth ...
- 非常贴心的轮子 FreeSql
FreeSql 项目从2018年11月28日开发至今,版本已发布至 v0.3.12,版本规则:年数-月-日-当日版本号.目前主要包括 FreeSql.FreeSql.Repository 两个项目的维 ...
- 【.NETCore开源】开弓没有回头箭
2019.2.11 开工大吉!经过了半个月的休假,今天回归岗位重新拾起工作,却发现熟悉的代码生疏了.年前的计划回忆不起来了,俗称"节后综合症". 忆半月圈子 过年放假的前几天有多篇 ...
- Error RZ3007: Targeted tag name cannot be null or whitespace
Step 1: Disable precompile updating below property in csproj file: <MvcRazorCompileOnPublish>f ...
- Spring Boot整合Mybatis并完成CRUD操作
MyBatis 是一款优秀的持久层框架,被各大互联网公司使用,本文使用Spring Boot整合Mybatis,并完成CRUD操作. 为什么要使用Mybatis?我们需要掌握Mybatis吗? 说的官 ...
- SAP MM Storage Location Missing in MD04 Result?
SAP MM Storage Location Missing in MD04 Result? Today I received a ticket from business team, a user ...
- Adreno OpenCL坑——bool转int
在项目代码中为了避免条件分支,需要把bool变成int的形式,然后通过向量运算的形式和单个单个的形式,其结果却是不同,向量的方式为(-1, 0),而单个的转换则为(1, 0) 有如下kernel代码: ...