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. __block修饰变量以及代码块的用法

    //如果没有"__block"修饰变量,则在代码块中无法修改变量的值 __block ; //定义代码块: //返回值类型 (^代码块名称)(参数类型) = ^(参数类型 参数名称 ...

  2. PHP 删除文件(图片)

    /** * 删除图片或文件 * @author Zhenwei Zhang <772979140@qq.com> * @param string $pic 图片或文件地址 */functi ...

  3. GCHandler的使用

    众所周知,我们在使用c#托管代码时,内存地址和GC回收那不是我们关心的,CLR已经给我们暗箱操作. 但是如果我们在c#中调用了一个非托管代码,比如vc的DLL,而且他有个回调函数,需要引用c#中的某个 ...

  4. Controller的创建

    在ControllerBuilder类中设置ControllerFactory,然后使用ControllerFactory创建Controller. http请求在进入httphandler映射处理时 ...

  5. Liunx的各种小指令

    tsshutdown -y ----关闭所有服务tsboot -g COMMON ----启动公共服务tsboot -g ETXX   ----启动XX服务 tsma -e oet1 -l 172.X ...

  6. ubuntu 15.10 install nvidia driver

    先添加源sudo add-apt-repository ppa:graphics-drivers/ppa 更新一下:sudo apt-get update (附原始链接:http://www.omgu ...

  7. 关于w3school的html5部分output 元素实例代码（点亲自试一试进去）的问题纠正

    修复: 将原来的 =  号修改成 <input type="button" onclick="resCalc()" value ="=" ...

  8. 【转】java中volatile关键字的含义

    java中volatile关键字的含义   在java线程并发处理中,有一个关键字volatile的使用目前存在很大的混淆,以为使用这个关键字,在进行多线程并发处理的时候就可以万事大吉. Java语言 ...

  9. META元素使用的简单学习

    meta标签是我们学习html时容易忽略的标签,其实它的作用很大,下面就一些网上关于meta标签的讲解内容做一个简单的归纳. META标签共有两个属性,它们分别是Http-equiv属性和Name属性 ...

  10. [解决方案] pythonchallenge level 6

    查看页面代码,知道找zip www.pythonchallenge.com/pc/def/channel.zip,查看zip下的readme.txt知道从90052,跑一遍知道要收集zip的comme ...