其实很简单,

首先需要两个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. msq 表操作与其数据类型

    一:表介绍 表相当于文件, 表中的一条记录就相当于文件的一行内容, 不同的是,表中的一条记录有对应的标题,称为表的字段: id,name, age, sex,称为字段, 其余的一行内容称为一条记录. ...

  2. WeFlow 简单使用教程

    一.前言 WeFlow 是什么?一个高效.强大.跨平台的前端开发工作流工具.(官网定义),下载那些你们都知道,我就不一 一介绍了.下面我说一下简单使用: 二.使用教程 首先,我们使用 WeFlow 是 ...

  3. 洛谷 - P3768 - 简单的数学题 - 欧拉函数 - 莫比乌斯反演

    https://www.luogu.org/problemnew/show/P3768 \(F(n)=\sum\limits_{i=1}^{n}\sum\limits_{j=1}^{n}ijgcd(i ...

  4. Unity3D研究院之手游开发中所有特殊的文件夹

    这里列举出手游开发中用到了所有特殊文件夹. 1.Editor Editor文件夹可以在根目录下,也可以在子目录里,只要名子叫Editor就可以.比如目录:/xxx/xxx/Editor  和 /Edi ...

  5. PV(Pageviews)、访问(Visits)和访问者(Visitors)的区别

    1. 在GA上,每个页面每次加载将被记为一次PV.举例来说,一次用户访问页面顺序为:页面A->页面B->页面A,然后离开了你的站点,那这次用户访问(Visits)的PV总计为3次.   2 ...

  6. lombok常用注解

    简介: Lombok能以简单的注解形式来简化java代码,提高开发人员的开发效率.例如开发中经常需要写的javabean,都需要花时间去添加相应的getter/setter,也许还要去写构造器.equ ...

  7. valgrind 使用入门

    近期在学习使用valgrind 来定位性能问题,记录一下整个操作过程以及涉及到的工具 一般在机器上都会预装valgrind 工具 使用callgrind 工具检查程序的调用情况,例如使用valgrin ...

  8. django_uWSGI+nginx环境

    1 uWSGI 作用 Django 默认使用的是 Python 自带的 simple HTTPServer 提供web服务的,在安全性和效率上都是不行的,只能用作django开发测试. WSGI是一个 ...

  9. flask_context

    定义全局的钩子函数 有的时候在处理请求之前和之后,执行某些特定的代码是很有用的,这就用到了请求钩子 例如在请求之前创建数据库连接或者redis连接:或者是系统里面用户请求处理之前先验证用户的身份,是否 ...

  10. Parenthesis UVALive - 4882 删除不必要的括号序列,模拟题 + 数据

    https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...