可以做得到。注明：内容非原创。学习javascript的时候觉得好就保存下来的文章：
html2canvas是一个相当不错的JavaScript类库，它使用了html5和css3的一些新功能特性，实现了在客户端对网页进行截图的功
能。html2canvas通过获取页面的DOM和元素的样式信息，并将其渲染成canvas图片，从而实现给页面截图的功能。
它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时，将采用Flashcanvas或
ExplorerCanvas技术代替实现。以下浏览器能够很好的支持该脚本：Firefox 3.5+, Google Chrome,
Opera新的版本, IE9以上的浏览器。
因为每个浏览器渲染页面的方式都不尽相同，所以生成的图片也不太一样。虽然它目前还是处理开发阶段，但还是很值得期待的。
这个插件依赖于jQuery插件，建议使用最新版的。
兼容性
html2canvas能在以下的浏览器中完美的运行。
- Firefox 3.5+
- Chrome
- Opera
- IE9使用方法
1、引入文件
首先我们需要引入jQuery库和html2canvas插件文件，注意html2canvas插件文件一定要在jQuery的后面引入，不然会报错。
<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>
2、调用插件
通过html2canvas方法调用插件，该方法接受两个参数，第一个为要生成截图的DOM元素，第二个参数为插件的配置
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) } })
通过一个回调函数来处理获取到的截图。
图片跨域问题
在网页的图片中，如果有跨域图片，调用toDataURL的时候会出错
SecurityError: The operation is insecure.
解决方法是在跨域的服务器上设置header设置为允许跨域请求
access-control-allow-origin: * access-control-allow-credentials: true
官网主页: http://html2canvas.hertzen.com/
本站文章除注明转载外，均为本站原创或翻译，欢迎任何形式的转载，但请务必注明出处，尊重他人劳动共创和谐网络环境。
转载请注明：文章转载自：问说 » html2canvas根据DOM元素样式实现网页截图
本文标题：html2canvas根据DOM元素样式实现网页截图
本文地址：http://www.uedsc.com/html2canvas.html
原文链接：http://www.uedsc.com/html2canvas.html
右击页面，查看源文件，会出现一个TXT文本里面全是页面的代码，也包括了js代码，你可以把这个文本另存在本地，根据页面的类型可以保存为htm、html、aspx等文件。一般web开发都会把js代码封装成一个文件，页面只是指向了js文件在服务器上的地址。打开页面源文件，找到那些js引用的地址（如果你懂代码的话），复制粘贴在浏览器中（如果是相对地址请加上域名），回车后你就可以获得这个js文件了。之后就是把保存的页面文件中的js引用地址改成你保存之后的js地址了，可以写电脑上的绝对路径。比如 d:新建文件夹\1.js一、添加引用在解决方案上单击右键，选择“Add Reference...”，添加“System.Windows.Forms”，添加完后，Web.Config 中应该有类似下面的内容：
<system.web>
<compilation debug="true">
<assemblies>
<add assembly="System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
二、 设置 STA 模式
在 @ Page 指令中加上 AspCompat="true"，以强制该网页在 STA（单线程单元） 模式下执行。结果类似如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" AspCompat="true" %>
三、写截图代码
using System
using System.Collections
using System.Configuration
using System.Data
using System.Web
using System.Web.Security
using System.Web.UI
using System.Web.UI.HtmlControls
using System.Web.UI.WebControls
using System.Web.UI.WebControls.WebParts
using System.Drawing
using System.Drawing.Imaging
using System.Windows.Forms
public partial class _Default : System.Web.UI.Page
{
private WebBrowser _webBrowser
protected void Page_Load(object sender, EventArgs e)
{
string url = Request.QueryString["url"]
if (string.IsNullOrEmpty(url))
{
url = "http://www.cftea.com/"
}
_webBrowser = new WebBrowser()
_webBrowser.ScrollBarsEnabled = false//不显示滚动条
_webBrowser.Navigate(url)
_webBrowser.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(Completed)
while (_webBrowser.ReadyState != WebBrowserReadyState.Complete)
{
System.Windows.Forms.Application.DoEvents()//避免假死，若去掉则可能无法触发 DocumentCompleted 事件。
}
}
public void Completed(object sender, WebBrowserDocumentCompletedEventArgs e)
{
//设置浏览器宽度、高度为文档宽度、高度，以便截取整个网页。
_webBrowser.Width = _webBrowser.Document.Body.ScrollRectangle.Width
_webBrowser.Height = _webBrowser.Document.Body.ScrollRectangle.Height
using (Bitmap bmp = new Bitmap(_webBrowser.Width, _webBrowser.Height))
{
_webBrowser.DrawToBitmap(bmp, new Rectangle(0, 0, bmp.Width, bmp.Height))
bmp.Save("C:\\Capture.png", ImageFormat.Png)
}
}
}
