html导出图片
有一个神奇的库：html2canvas。
这个库简洁优美，使用方便。
下面先看一个小demo，它需要用到一张图片：haha.jpg。
<html>
<head>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
</head>
<body>
<div id="mydiv">
<h1>天下大势,为我所控</h1>
<img src="haha.jpg">
</div>
</body>
<script>
html2canvas(document.querySelector("#mydiv"), {
onrendered: function (canvas) {
document.body.appendChild(canvas)
}
})
</script>
</html>
html转成图片这个功能并不是一种规范，那么html2canvas这个库是如何做到“截图”的呢？
实际上，html2canvas并没有截图，它是通过DOM读取元素的属性、样式等所有信息，以此为基础自己画出来的。
明白了原理，也就很容易想到html2canvas无法截图视频，也无法截图SWF等内容。JS所能获取的全部信息就是html2canvas所能获取到的全部信息。
html2canvas并非能获取任意元素的截图，它具有以下局限：
- 不支持iframe
- 不支持跨域图片
- 不能在浏览器插件中使用
- 部分浏览器上不支持SVG图片
- 不支持Flash
- 不支持古代浏览器和IE
如果想把canvas导出为图片，可以使用另外一个库：canvas2image
更多信息，参考官方文档：html2canvas
还有另外一种将HTML页面内容导出为图片的方式，这种方式利用了img元素的src属性，src属性可以是base64编码的字符串，也可以是SVG格式的字符串。
<!DOCTYPE html>
<html>
<body><h2>Input Div:</h2>
<div id="div">
<p>Just have a <span style='color:white; text-shadow:0 0 2px blue;'>
TRY</span></p>
<p><b>By Dion</b></p>
</div>
<h2>Output Image:</h2>
<script>
var divContent = document.getElementById("div").innerHTML;
var data = "data:image/svg+xml," +
"<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>"
+ "<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' " +
"style='font-size:16px;font-family:Helvetica'>"
+ divContent +
"</div>" +
"</foreignObject>" +
"</svg>";
var img = new Image();
img.src = data;
document.getElementsByTagName('body')[0].appendChild(img);</script>
</body>
</html>
html导出图片的更多相关文章
- C#向PPT文档插入图片以及导出图片
PowerPoint演示文稿是我们日常工作中常用的办公软件之一,而图片则是PowerPoint文档的重要组成部分,那么如何向幻灯片插入图片以及导出图片呢?本文我将给大家分享如何使用一个免费版Power ...
- .net 下新版highcharts本地导出图片bug处理
最近公司要用到highcharts这个插件来生成图表,所以我花了点时间研究了下. 现在最新的版本是3.0.2,这js插件居多优点就不比多说了,demo官网上也很详细.但是优点不爽的地方是,导出图片这个 ...
- Asp.net通过模板(.dot/Html)导出Word，同时导出图片
一.Office组件导出Word(服务器配置麻烦) 需要引用Office的DLL,在下文的附件中,不同的Offic版本用的不一样,虽然高级版本可以兼容低级的,不过,还是统一版本最好 贴上核心代码(转载 ...
- FusionCharts V3图表导出图片和PDF属性说明（转）
百闻不如一见,狠狠点击,快快下载:(演示文档有错误,不提供下载了.待新的演示文档出来.) 许多朋友说上面的DEMO用不了.fusioncharts官方的演示非常不错,就是来不及整理,各位大侠们可以研究 ...
- FusionChart 导出图片 功能实现（转载）
FusionChart 导出图片 功能实现(转载) http://www.cnblogs.com/jiagoushi/archive/2013/02/05/2893468.html 题目:精美Fusi ...
- Highcharts 本地导出图片和PDF asp.net mvc版
啰嗦: 现在大家利用Highcharts开发时,有时候会遇到导出的功能问题,但是highcharts默认是链接自己的服务器上进行处理,但是有时候我们会连不上他的服务器,所以我们要让他在我们的服务器上进 ...
- hightchart导出图片
通常在使用highchart导出图片pdf等文件时,我们一般直接引入exporting.js即可 执行导出操作则会直接请求highchart服务器,执行生成图片等操作,然后下载到客户端: 但这一切的操 ...
- JXLS 2.4.0系列教程（六）番外篇——导出图片（完结）
突然想起来有同学说过能不能导出图片,本来我是想说不懂的,后来我上官网查了查,还挺容易.我就简短的写一写怎么导出图片. 官方提供了导出图片标签: jx:image(lastCell="D10& ...
- 微信小程序 canvas导出图片模糊
//保存到手机相册save:function () { wx.canvasToTempFilePath({ x: , y: , width: , //导出图片的宽 height: , //导出图片的高 ...
- Activiti开发案例之activiti-app工作流导出图片
前言 自从 Activiti 和 JBPM4 分家以后,Activiti 目前已经发展到了版本7,本着稳定性原则我们最终选择了6,之前还有一个版本5. 问题 在开发使用的过程中发现 Activiti ...
随机推荐
- 基于Android的ELF PLT/GOT符号重定向过程及ELF Hook实现（by 低端码农 2014.10.27）
引言 写这篇技术文的原因,主要有两个: 其一是发现网上大部分描写叙述PLT/GOT符号重定向过程的文章都是针对x86的.比方<Redirecting functions in shared EL ...
- 【SPOJ】【1825】Free Tour 2
点分治 点分治的例题2(本题代码结果为TLE……) 强烈谴责卡时限QAQ,T了无数次啊无数次…… 不过在N次的静态查错中倒是加深了对点分治的理解……也算因祸得福吧(自我安慰一下) TLE后的改进:每棵 ...
- 【BZOJ】【3053】The Closest M Points
KD-Tree 题目大意:K维空间内,与给定点欧几里得距离最近的 m 个点. KD树啊……还能怎样啊……然而扩展到k维其实并没多么复杂?除了我已经脑补不出建树过程……不过代码好像变化不大>_&g ...
- 分布式缓存系统Memcached在Asp.net下的应用
Memcached 是一个高性能的分布式内存对象缓存系统.用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来降低读取数据库的次数,从而提高动态.数据库驱动站点的速度. Memcache ...
- 在Spark上运行WordCount程序
1.编写程序代码如下: Wordcount.scala package Wordcount import org.apache.spark.SparkConf import org.apache.sp ...
- 几行简单代码实现DIV层上显示Tooltip效果
最近在做一个项目,要在鼠标移到层上后显示出tip提示,网上找了半天,都很麻烦,就自己修改了一个,记录在下面 测试在IE 7.8.9及 chrome 上没问题. <HTML> <HEA ...
- mysql 数据库远程访问设置方法
摘自: http://www.iteye.com/topic/418151 mysql数据库远程访问设置方法 1.修改localhost更改 "mysql" 数据库里的 " ...
- matlab中将矩阵按照行打乱顺序的一个例子
来自百度百科: A = [1, 2, 3; 4, 5, 6; 7, 8, 9; 10, 11, 12] rowrank = randperm(size(A, 1)); % 随机打乱的数字,从1~行数打 ...
- ArcGIS按字段属性分割文件
在ArcGIS中我们有时需要将一个文件安字段的属性分割成多个文件,网友总结了几乎所有的方法:http://blog.sina.com.cn/s/blog_4e87fb4c0100fcjh.html , ...
- 使用GCD创建单例
+ (KKTextHUB *)sharedTextHUB { static KKTextHUB *sharedHub = nil; static dispatch_once_t onceToken; ...