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自带的照片查看器看着会模糊 不知道是我个人电脑的问题还是都是这个问题
看着就这种。
用附件中的画画和其他工具打开又没有什么问题
下了班等下回去家里的电脑看看!
转载于:https://www.cnblogs.com/w5942066/p/10485263.html
Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地相关推荐
- html中css修改字体,CSS字体设置 DIV内字体设置
CSS设置字体 DIV内文字字体花样如何配置,怎样设置装备摆设对象内笔墨字体样式,比喻黑体.宋体.微软雅黑.英翰墨体等字体如何设置装备摆设? 一.font标签配置字体 我被设置装备摆设为微软雅黑 fo ...
- [译] 关于CSS中的float和position (父容器div内的子元素div为float时,父元素无法撑开(或高度自适应)的解决方式)
测试案例:http://blog.csdn.net/goodshot/article/details/44408245 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取决于具体页面的排版要求, ...
- 将ImageVIew中的图片保存到本地相册中
2019独角兽企业重金招聘Python工程师标准>>> 一:将ImageView中的图片转换成Bitmap 二:将Bitmap 转换成二进制,写入本地 三:用广播通知相册进行更新相册 ...
- php - 使用 phpqrcode.php 生成二维码图片,同时并将生成的二维码图片保存到本地服务器中(详细示例教程源码)
效果图 网上的教程都太乱了,不好移植到自己的项目中. 最终效果,如下图所示: 你可以直接复制本文提供的方法,稍微改改就能应用到你的项目中去. 示例代码干净整洁,注释超级详细 示例源码 首先需要引入 p ...
- php自动抓取文章图片,从文章中提取图片,把图片保存到本地,自动提取缩略图...
开发二代旅游网站程序和CMS的时候,有一个需求,就是从网上复制的内容,里面包含图片的,需要对把图片提取出来,并且保存到本地,并且把图片的URL地址本地化,以下是实现的代码. 开发二代旅游网站程序和CM ...
- python中if brthon环境安装包_Python实现base64编码的图片保存到本地功能示例
本文实例讲述了Python实现base64编码的图片保存到本地功能.分享给大家供大家参考,具体如下: # -*- coding:utf-8 -*- #!python3 import os import ...
- java中抓拍图像_JavaCV调用摄像头并抓拍图片保存到本地
添加依赖 org.bytedeco javacv-platform 1.4.1 org.bytedeco.javacpp-presets opencv-platform 3.4.1-1.4.1 jun ...
- 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.Ch ...
- ASP.NET 2.0 中的代码隐藏和编译
ASP.NET 2.0 中的代码隐藏和编译 Fritz Onion 本页内容 代码隐藏 编译 程序集生成 小结 当我撰写本专栏的时候,Microsoft® .NET Framework 2. ...
最新文章
- Hibernate openSession() 和 getCurrentSession的区别 .
- Struts编程心得
- java中JList的setSelectionMode()详解
- P1967 货车运输
- SAP FI系列培训视频教程
- matlab如何创建table,MATLAB table数据结构 首篇
- python数字类型转换函数_python中的各种数据类型中的数据格式转换
- sybase性能优化经验浅谈
- kuangbin带我飞QAQ DLX之一脸懵逼
- python安装库后无法调用摄像头_银川监控摄像头安装,有人在代码里下毒!慎用 pip install 命令...
- C语言九十三之输入一个字符x,找到输入的那句话(字符串)里面一样字母的位置。
- LIS最长上升子序列
- 小程序 authorize scope.userLocation 需要在app.json中声明permission字段
- idea快捷操作_IDEA插件系列 快捷键神器!Key Promoter X
- Gin实践 番外 Golang交叉编译
- CAF(C++ actor framework)使用随笔(unbecome与keep_behavior用法)
- ASP.NET MVC4 高级编程
- 文科专业考计算机专业研究生,跨专业文科生考计算机研究生的经验
- (附源码)SSM信用卡增值业务系统JAVA计算机毕业设计项目
- Photoshop抠图笔记