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. C语言程序设计第5堂作业

    一.本次课学习主要内容及知识结构点: 二.实验内容:(60分) 1. 求奇数和.输入一批正整数(以零或负数为结束标志),求其中的奇数和.试编写相应程序. 2. 展开式求和.输入一个实数 x,计算并输出 ...

  2. Java和eclipse常用操作

    eclipse: ctrl+F10 显示行号 ctrl+shift+F 自动对齐 ctrl+/ 注释 java: jar包: Manifest-Version - 指定清单文件的版本号 Main-Cl ...

  3. VIM C++语法高亮配色

    因工作需求,必须在终端下远程下代码,vim打开cpp/h文件,看到一连串的字母就傻了,根本无法阅读. 后来才知道VIM这高大上的文本编辑器支持很多的功能,很多的功能.首先最基本的就是语法高亮配色 1. ...

  4. Java源码分析系列

    1) 深入Java集合学习系列:HashMap的实现原理 2) 深入Java集合学习系列:LinkedHashMap的实现原理 3) 深入Java集合学习系列:HashSet的实现原理 4) 深入Ja ...

  5. 字符串处理——（第一次作业Draw输入命令处理部分升级）

    #include<iostream> #include<sstream> //使用istringstream必须包含的头文件 #include<string> #i ...

  6. 关于JAVA中对字符串与数组求长度的问题

    我在学习中发现在求数组或者字符串的长度的时候,用到length的时候,有时候是length,有时候是length(),很是奇怪,于是上API查了一下,发现一些小细节. 首先看看这段代码 public ...

  7. 如何开发H5项目 -- 入门篇

    前言 H5即HTML5,H5开发具有低成本.高效率.跨平台.研发周期短,用户接触成本低等特性. 一.开发环境 在开发一个H5项目之前,需要先搞好环境.主要有node.npm.gulp.bower.下面 ...

  8. tableView的高度问题

    新建tableView 到一个普通的视图控制器的View 下,如果大小是全屏高 ,你的数据最下面显示不全,需要在设置高度时候,用屏幕高度-65 即可

  9. Linux上安装oracle客户端及sqlldr

    1.建立oracle的安装目录,一般为/opt/oracle:2.将安装包instantclient-basic-linux.x64-11.2.0.3.0.zip放入到该目录中,并进行解压:unzip ...

  10. 探究toString()和valueOf()

    1.用法如下:toString()方法:返回对象的字符串表示. 对象 操作 Array 将 Array 的元素转换为字符串.结果字符串由逗号分隔,且连接起来. Boolean 如果 Boolean 值 ...