Html5怎么导出图片
其实很简单,
首先需要两个js文件
直接上代码,几行就解决了
<a id="example1" onclick="exportGrid()" >导出图表</a>
//导出图表
function exportGrid() { html2canvas($("#exportGrid"), {
allowTaint: true,
taintTest: false,
onrendered: function (canvas) {
//canvas.id = "mycanvas";
//document.body.appendChild(canvas);
//生成base64图片数据
var url = canvas.toDataURL();
//以下代码为下载此图片功能
var triggerDownload = $("<a>").attr("href", url).attr("download", (new Date()).getTime() + "girds.png").appendTo("body");
triggerDownload[0].click();
triggerDownload.remove();
}
});
}
解决了你的问题的话,点个赞呗
Html5怎么导出图片的更多相关文章
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
先上代码 <script type="text/javascript" language="javascript"> var idTmr; ...
- html页面、canvas导出图片
背景:项目现场提出将一个html做的图形页面导出为一张图片的需求,在网上搜了一下,发现都不是很全面,所以综合了很多大神的帖子,自己再次封装,以适用项目需求. 所需js库:html2canvas.js( ...
- canvas画布导出图片并下载
近期在学习关于画布知识,关于 画布导出图片, 在导出jpeg格式的图片时,会发现图片背景色变成了黑色,原因是画布透明的地方 默认转成了黑色,可以在绘制画布前设置透明处背景色为白色. // 背景色转换成 ...
- C#向PPT文档插入图片以及导出图片
PowerPoint演示文稿是我们日常工作中常用的办公软件之一,而图片则是PowerPoint文档的重要组成部分,那么如何向幻灯片插入图片以及导出图片呢?本文我将给大家分享如何使用一个免费版Power ...
- .net 下新版highcharts本地导出图片bug处理
最近公司要用到highcharts这个插件来生成图表,所以我花了点时间研究了下. 现在最新的版本是3.0.2,这js插件居多优点就不比多说了,demo官网上也很详细.但是优点不爽的地方是,导出图片这个 ...
- HTML5移动端图片左右切换动画
插件描述:HTML5移动端图片左右切换动画 小海今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外 ...
- Asp.net通过模板(.dot/Html)导出Word,同时导出图片
一.Office组件导出Word(服务器配置麻烦) 需要引用Office的DLL,在下文的附件中,不同的Offic版本用的不一样,虽然高级版本可以兼容低级的,不过,还是统一版本最好 贴上核心代码(转载 ...
- 使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)
使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe) 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码 ...
- HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% // ...
随机推荐
- webpack 4 基础知识点梳理
目录 webpack安装 webpack配置文件 webpack核心概念 entry output loader plugins sourceMap webpack-dev-server 跨域 &am ...
- IOS11 - UINavigationItem大标题,搜索栏实现
1.新建模型 class Contact: NSObject { var name : String? var mobile : String?{ didSet{ { mobileString = m ...
- 如何设置Xcode模拟器地图的当前位置
使用模拟器上的地图的话,需要设置当前位置,开启定位后,才能定位准确. 一.选中模拟器:Debug - Location - Custom Location 弹出的纬经度坐标.纬经度.纬经度坐标,默认显 ...
- PL/SQL 的 事务处理
原文连接 http://blog.csdn.net/lhl6688/article/details/42874109 BEGIN DECLARE V_COUNT INTEGER; -- 表中记录 ...
- 设置上一级controller的backBarButtonItem
设置上一级controller的backBarButtonItem. self.navigationItem.backBarButtonItem= [[UIBarButtonItem alloc]in ...
- C 语言实例 - 查找字符在字符串中出现的次数
C 语言实例 - 查找字符在字符串中出现的次数 C 语言实例 C 语言实例 查找字符在字符串中的起始位置(索引值从 开始). 实例 #include <stdio.h> int main( ...
- 50 个加速包都抢不到车票,还不如这个 Python 抢票神器!
又到了一年一度的抢票大战,本来就辛苦劳累了一年,想着可以早点订到票跟家里人团聚.所以有挺多的人,宁愿多花些钱去找黄牛买票.但今年各种抢票软件的横行,还有官方出的加速包,导致连黄牛都不敢保证能买到票.你 ...
- jmeter常用的beanshell脚本
时间戳下载文件保存响应内容断言连接数据库解析jsonlist递归创建多级目录 常用内置变量调用cmd文件GUI小命令 时间戳import java.text.SimpleDateFormat;impo ...
- 牛客练习赛42C(枚举权值)
传送门 思路:既然无法枚举每个情况,那就枚举每个出现过的权值,加和.那么每个权值出现了多少次呢?用总数减去一次都选不中这个数的次数即可,类似概率的方法. #include <bits/stdc+ ...
- 洛谷 P1954 [NOI2010]航空管制
https://www.luogu.org/problemnew/show/P1954 拓扑排序, 注意到如果正着建图("a出现早于b"=>"a向b连边" ...