html2canvas通过获取页面的DOM和元素的样式信息，并将其渲染成canvas图片，从而实现给页面截图的功能。

因为每个浏览器渲染页面的方式都不尽相同，所以生成的图片也不太一样。

环境要求: jQuery
兼容性: Firefox 3.5+, Chrome, Opera, IE9

官网主页: http://html2canvas.hertzen.com/

测试生成的图片效果 有些元素的样式没有完全展示出来

<html>
<head>
<meta name="layout" content="main">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
 
<script type="text/javascript" >
$(document).ready( function(){
$(".example1").on("click", function(event) {
event.preventDefault();
html2canvas(document.body, {
allowTaint: true,
taintTest: false,
onrendered: function(canvas) {
canvas.id = "mycanvas";
//document.body.appendChild(canvas);
//生成base64图片数据
var dataUrl = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = dataUrl;
document.body.appendChild(newImg);
}
});
});
 
});
 
</script>
</head>
<body>
 
Hello!
<div class="" style="">
计算机天堂测试html5页面截图
<br>jsjtt.com
</div>
 
<textArea id="textArea" col="20" rows="10" ></textArea>
<input class="example1" type="button" value="button">
生成界面如下：
</body>
</html>
 

说明在测试过程中出现的问题如果页面上引用跨域的图片文件调用toDataURL的时候会出错

SecurityError: The operation is insecure.

解决方法：在跨域的服务器上设置header设置为允许跨域请求

  1. access-control-allow-origin: *  access-control-allow-credentials: true

html5 实现网页截屏 页面生成图片(图文)的更多相关文章

  1. php结合phantomjs实现网页截屏、抓取js渲染的页面

    首先PhantomJS快速入门 PhantomJS是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, ...

  2. Java实现网页截屏功能（基于phantomJs）

    公司最近有个需求:把用户第一次的测量身体信息和最近一次测量信息进行对比,并且需要把对比的数据截成图片可以发给用户(需要在不打开网页的情况下实时对网页进行截图然后保存到服务器上,返回图片地址),通过网上 ...

  3. 利用PhantomJS进行网页截屏，完美解决截取高度的问题

    关于PhantomJS PhantomJS 是一个基于WebKit的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS ...

  4. PhantomJS linux系统下安装步骤及使用方法(网页截屏功能)

    PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, ...

  5. 利用PhantomJS进行网页截屏

    利用PhantomJS进行网页截屏 关于PhantomJS PhantomJS 是一个基于WebKit的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种W ...

  6. html转图片网页截屏（二）PhantomJS

    关于PhantomJS PhantomJS 是一个基于WebKit的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS ...

  7. 使用PHANTOMJS对网页截屏

    PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, ...

  8. Python 实现网页截屏、查库、发邮件

    本文介绍了使用 Python(2.7版本)实现网页截屏.查库.发邮件的 demo.用到了 selenium.phantomjs.mailer.jinja2.mysqldb 还有 image,都是比较典 ...

  9. Javascript网页截屏的方法

    最近我在研究开发一个火狐插件,具体的功能是将网页内容截屏并分享到微博上.目前基本功能已经实现,大家可以在 @程序师视野 里看到用这个截图插件分享的微博的效果. 之前我曾写过如何将canvas图形转换成 ...

随机推荐

  1. [Python]记录详细调用堆栈的日志

    参考http://www.cnblogs.com/tuzkee/p/3243110.html import sys import os def detailtrace(info): retStr = ...

  2. win系统登录密码重置

    [1]制作PE启动盘,参考 http://jingyan.baidu.com/article/72ee561aadfb1fe16138dfab.html [2]拿PE启动盘启动电脑,重置密码,参考 h ...

  3. UE4 代码编写细节：静态变量

    Note:因为在切换关切时,会GC掉所有GameThread线程下的Object类,如果Static是UOBject 请调用AddToRoot函数  当然如果你的UObject子类Object是在自己 ...

  4. BZOJ 1018 线段树维护图连通性

    用8个bool维护即可分别为LURU,LURD,LDRU,LDRD,LULD,RURD,Side[1],Side[2]即可. Side表示这一块有没有接到右边.Merge一下就可以了.码农题,WA了一 ...

  5. C#通过反射进行枚举描述相关操作

    C#可以通过反射,来获取枚举的描述信息或通过描述信息获取到指定类型的枚举 /// <summary> /// 获取枚举描述 /// </summary> /// <par ...

  6. 数组循环：循环多个li 每个li 固定N条数据

    PHP代码: $arr = array(1,2,3,4,5,6,7); $x = 1; $y = 0; foreach($arr as $k => $v){ $data[$y][] = $v; ...

  7. c# chart

    1.随便一个例子 string sql = "select distinct count(*) as c,datepart(day,ull_loginTime) as a from user ...

  8. Servlet-RequestDispatcher.forward方法

    forward方法与Include方法非常相似,但有5点不同 1,在调用forward方法之前,输出缓冲区的数据会被清空,也就是说,在使用forward方法进行请求转发时,只可能输出别转发的web资源 ...

  9. linuxz终端开启echo颜色显示

    echo输出命令echo [选项] [输出内容]-e //支持反斜线控制的字符转换:控制字符:\a //输出警告音:\b //退格键,也就是向左删除键:\n //换行符:\r //回车键:\t //制 ...

  10. XSS跨站脚本小结

    XSS漏洞验证经常遇到一些过滤,如何进行有效验证和绕过过滤呢,这里小结一下常见的一些标签,如<a><img>等. 参考链接:http://www.jb51.net/tools/ ...