其实很简单,

首先需要两个js文件

  jquery.min.js

  html2canvas.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怎么导出图片的更多相关文章

  1. 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; ...

  2. html页面、canvas导出图片

    背景:项目现场提出将一个html做的图形页面导出为一张图片的需求,在网上搜了一下,发现都不是很全面,所以综合了很多大神的帖子,自己再次封装,以适用项目需求. 所需js库:html2canvas.js( ...

  3. canvas画布导出图片并下载

    近期在学习关于画布知识,关于 画布导出图片, 在导出jpeg格式的图片时,会发现图片背景色变成了黑色,原因是画布透明的地方 默认转成了黑色,可以在绘制画布前设置透明处背景色为白色. // 背景色转换成 ...

  4. C#向PPT文档插入图片以及导出图片

    PowerPoint演示文稿是我们日常工作中常用的办公软件之一,而图片则是PowerPoint文档的重要组成部分,那么如何向幻灯片插入图片以及导出图片呢?本文我将给大家分享如何使用一个免费版Power ...

  5. .net 下新版highcharts本地导出图片bug处理

    最近公司要用到highcharts这个插件来生成图表,所以我花了点时间研究了下. 现在最新的版本是3.0.2,这js插件居多优点就不比多说了,demo官网上也很详细.但是优点不爽的地方是,导出图片这个 ...

  6. HTML5移动端图片左右切换动画

    插件描述:HTML5移动端图片左右切换动画 小海今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外 ...

  7. Asp.net通过模板(.dot/Html)导出Word,同时导出图片

    一.Office组件导出Word(服务器配置麻烦) 需要引用Office的DLL,在下文的附件中,不同的Offic版本用的不一样,虽然高级版本可以兼容低级的,不过,还是统一版本最好 贴上核心代码(转载 ...

  8. 使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)

    使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)   原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码 ...

  9. HTML5+javascript实现图片加载进度动画效果

    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览:   0%   // ...

随机推荐

  1. mysql 、redis的区别

    我们知道,mysql是持久化存储,存放在磁盘里面,检索的话,会涉及到一定的IO,为了解决这个瓶颈,于是出现了缓存,比如现在用的最多的 memcached(简称mc).首先,用户访问mc,如果未命中,就 ...

  2. Flex屏蔽并自定义鼠标右键菜单

    http://www.cnblogs.com/wuhenke/archive/2010/01/29/1659353.html Google Code上有一个RightClickManager的项目. ...

  3. Lua 不是 C++

    http://blog.codingnow.com/2008/08/lua_is_not_c_plus_plus.html 嗯,首先,此贴不是牢骚帖. 话题从最近私人的一点工作开始.应 dingdan ...

  4. java读取properties文件的配置信息

    项目开发中,我们一般来向 application.properties 文件中放一些全局配置变量,以便程序中读取使用,本篇内容来演示从properties配置文件中读取键值. 当然,我们不一定写入 a ...

  5. 3DMAX 4角色蒙皮

    1 角色建模 略,以后补充 2 骨骼绑定 一般不用骨骼直接拉,Biped足够,以后适当补充骨骼直接拉的操作 1 将Biped骨骼和模型对齐 1 创建biped之后,第一步一要先选择,然后再对位骨骼到模 ...

  6. CF888E Maximum Subsequence(meet in the middle)

    给一个数列和m,在数列任选若干个数,使得他们的和对m取模后最大( \(1<=n<=35\) , \(1<=m<=10^{9}\)) 考虑把数列分成两份,两边分别暴力求出所有的可 ...

  7. [Xcode 实际操作]二、视图与手势-(12)UITapGestureRecognizer手势之双击

    目录:[Swift]Xcode实际操作 本文将演示使用视图的双击手势,完成视图的交互功能. import UIKit class ViewController: UIViewController { ...

  8. PL/SQL基础知识

    Oracle之PL/SQL学习笔记 自己在学习Oracle是做的笔记及实验代码记录,内容挺全的,也挺详细,发篇博文分享给需要的朋友,共有1w多字的学习笔记吧.是以前做的,一直在压箱底,今天拿出来整理了 ...

  9. Java | 基础归纳 | 随机数应用

    Java中一般有两种随机数,一个是Math中random()方法,一个是Random类. Math.random();//返回0~1的中随机数值 Random random = new Random( ...

  10. [题解](树形dp/换根)小x游世界树

    2. 小x游世界树 (yggdrasi.pas/c/cpp) [问题描述] 小x得到了一个(不可靠的)小道消息,传说中的神岛阿瓦隆在格陵兰海的某处,据说那里埋藏着亚瑟王的宝藏,这引起了小x的好奇,但当 ...