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. asp.net C#获取程序文件相关信息

    代码如下 复制代码 using System.Reflection;using System.Runtime.CompilerServices; //// 有关程序集的常规信息是通过下列// 属性集控 ...

  2. ionic2 图片上传

    参考URL:https://github.com/dsgriffin/Ionic-2-File-Transfer-Example

  3. K均值聚类算法的MATLAB实现

    1.K-均值聚类法的概述    之前在参加数学建模的过程中用到过这种聚类方法,但是当时只是简单知道了在matlab中如何调用工具箱进行聚类,并不是特别清楚它的原理.最近因为在学模式识别,又重新接触了这 ...

  4. 使用Xmanager远程连接CentOS6.4图形界面详解(图文)

    1.首先安装与下载图形界面GNOMEyum groupinstall "Desktop"yum groupinstall "X Window System"yu ...

  5. 通过docker-machine和etcd部署docker swarm集群

    本片文章介绍一下 使用docker-machine 搭建docker swarm 集群:docker swarm是docker 官方搭建的容器集群编排工具:容器编排,就是可以使你像使用一太机器一样来使 ...

  6. Sliverlight 样式

    UserControl 页面级样式UserControl.Resources style setter Property value. TargetType 应用的类型 使用 style static ...

  7. understand dojo/domReady!

    require(["dojo/dom", "dojo/domReady!"], function(dom){ dom.byId("helloworld ...

  8. 基于.NET的CAD二次开发学习笔记一：CAD开发入门

    1.AutoCAD .NET API由不同的DLL文件组成,它们提供用于访问图形文件或AutoCAD应用程序的包含丰富的类.结构.方法和事件.每一个DLL文件都定义不同的使用基于功能的库组织组件的命名 ...

  9. No.1 CAS 之LDAP认证服务端集群配置

    建档日期:   2016/08/31 最后修改日期:   2016/12/09   1 概述 本文描述了CAS单点登录服务端配置的大概流程,希望抛砖引玉,帮助你完成CAS服务端的配置. 本文采用apa ...

  10. 【Learning Python】【第二章】Python基础类型和基础操作

    基础类型: 整型: py 3.0解决了整数溢出的问题,意味着整型不必考虑32位,64位,有无符号等问题,你写一个1亿亿亿,就是1亿亿亿,不会溢出 a = 10 ** 240 print(a) 执行以上 ...