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 ,一个简单而有效的迷你剖析器 ...
随机推荐
- java一个大接口拆用多线程方式拆分成多个小接口
问题引入 目的:我们的接口A 分别调用了a1 a2 a3 三个接口,最终返回值是 a1的返回值+a2的返回值+a3的返回值 如果同步执行 a1 a2 a3 然后结果相加 很慢 . 如果异步执行 无法 ...
- JS实现页面复制文字时自动加版权
经亲自实践,尝试了各种方法,目前可行的方法主要有如下两种: 可以在任何运行使用js代码的网站中使用,比如本人在自己的博客园博客中实现了一下,读者您可亲自在本人博客上测试. 方法1: <scrip ...
- 更好用的css命名方式——BEM命名
一.什么是BEM? BEM代表块(Block),元素(Element),修饰符(Modifier).无论是什么网站页面,都可以拆解成这三部分. 二.带你认识网页 我们来看一下qq的官网,它可以由三个块 ...
- TreeSet集合解析
TreeSet是实现Set接口的实现类.所以它存储的值是唯一的,同时也可以对存储的值进行排序,排序用的是二叉树原理.所以要理解这个类,必须先简单理解一下什么是二叉树. 二叉树原理简析 假如有这么一个集 ...
- Git协同工作流介绍
git相关的文章和教程非常多,但是系统介绍和了解工作流的人并不多,在使用过程中用错或用偏的也不少,这里分享的是,假设你已经入门的情况下,我们如何去选择适合团队需要的工作流. git优势 这里先唠叨gi ...
- 随笔：WPS居然！出了！Mac版！
震惊! WPS! 居然! 出了! Mac版! 刚刚,我打算改一个word文档,打开了我的WIN10虚拟机,然而由于这个win10是前两天重装的,上面并没有word和wps. 当我打开wps官网的时候, ...
- octotree-chrome插件，Github代码阅读神器
1.下载octotree-chrome插件 下载地址 2.安装问题 由于新版chrome为了安全,已经不支持像以前一样拖拽插件进行安装,只能从其 Chrome Web Store 下载安装扩展程序. ...
- 查找第三方银行官方app下载链接探索过程
需求:最近有个需求,点击按钮,弹出一个所需银行选项的非全屏弹出层,再点击某银行选项,随即跳转到该银行的app下载界面,如下图所示 注:这里只是引用相关银行的链接,不需要做什么逻辑处 ...
- javaScript设计模式之面向对象编程（object-oriented programming，OOP）(二）
接上一篇 面向对象编程的理解? 答:面向对象编程,就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与动作(方法).这个对象我们称之为类.面向对象编程思想其中一个特点就是封装,就是把你需 ...
- 【Android Studio安装部署系列】五、新建你的第一个项目：HelloWorld
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 新建项目的步骤. 开始创建项目 如果是刚安装Android studio的话,点击Start a new Android Studi ...