请教一个对网页截图的问题

把这个div预览出来，调用整个页面的样式，预览只显示这个div的内容，然后截图预览的过程可以隐藏起来，用户前端看不到。

我的功能就有预览，不是故意这样的，现在的问题是怎么针对指定DIV截图。

CSS定位截图？不太懂... 屏幕分辨率会受影响吧？如果是通过CSS的话。

http://www.cnblogs.com/Cyto/archive/2009/01/13/1375075.html

QQ截图 + chrome/firbug chrome/firbug 可以直接修改div样式，让轮廓变得明显，再用QQ截图接下来，虽然这个不太精确，但是也没必要太精确。

http://download.csdn.net/detail/rjzou2006/772760 网页截屏,web截屏

截整屏很简单，现在是截某个DIV

截整屏跟截某个DIV有什么区别,反正是截屏,还不是你想怎么截就怎么截.
而且你也说了有预览功能,那就直接预览出那个DIV,然后再把预览的DIV当整屏截取么好了

只要截屏控件提供一个接口就行了吧。比如提供一个CaptureRect接口，然后你将DIV的坐标传给Web截屏控件，就行了。你自已将DIV的逻辑坐标转换为屏幕坐标。

我们用的一个控件，他们直接提供了截取指定区域的接口。然后我们直接调用那个接口就行了。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Web截屏控件标准版演示页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <link type="text/css" rel="Stylesheet" href="ScreenCapture/ScreenCapture.css" />
    <script type="text/javascript" src="ScreenCapture/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="ScreenCapture/ScreenCapture.js" charset="utf-8"></script>
</head>
<body>
<div id="ScreenCaptureMessage">
<div id="CaptureMessage">
<img alt="进度图标" src="ScreenCapture/SL_Uploading.gif" /><span>图片上传中...</span><span>10%</span>
</div>
<input id="BtnCapture" type="button" value="截取屏幕区域" />
<input id="BtnCapture2" type="button" value="截取整个屏幕" />
<input id="BtnCapture3" type="button" value="截取指定区域" />
<img id="ScreenImg" alt="截屏图片" style="display: none" />
</div>
<script type="text/javascript" language="javascript">
var scpMgr = new CaptureManager("CaptureMessage");
scpMgr.Config["PostUrl"] = "http://localhost:1830/asp.net/upload.aspx"; window.onload = function()
{
$("#BtnCapture").click(function() { scpMgr.Capture(); });
$("#BtnCapture2").click(function() { scpMgr.CaptureScreen(); });
$("#BtnCapture3").click(function() { scpMgr.CaptureRect(0,0,100,100); });//这个截取指定区域的接口就是他们提供的。
}
</script>
</body>
</html>

楼主试试这个WEB截屏控件：http://www.cnblogs.com/xproer/archive/2010/12/05/1896778.html
与FCKEditor2.x整合与CKEditor3.x整合与KindEditor3.x整合与xhEditor1.x整合与Discuz!X2整合-常用工具条与Discuz!X2整合-高级工具条与Discuz!X2整合-弹出截屏选择窗口
整合示例代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Web截屏控件标准版演示页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <link type="text/css" rel="Stylesheet" href="ScreenCapture/ScreenCapture.css" />
    <script type="text/javascript" src="ScreenCapture/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="ScreenCapture/ScreenCapture.js" charset="utf-8"></script>
</head>
<body>
<div id="ScreenCaptureMessage">
<div id="CaptureMessage">
<img alt="进度图标" src="ScreenCapture/SL_Uploading.gif" /><span>图片上传中...</span><span>10%</span>
</div>
<input id="BtnCapture" type="button" value="截取屏幕区域" />
<input id="BtnCapture2" type="button" value="截取整个屏幕" />
<input id="BtnCapture3" type="button" value="截取指定区域" />
<img id="ScreenImg" alt="截屏图片" style="display: none" />
</div>
<script type="text/javascript" language="javascript">
var scpMgr = new CaptureManager("CaptureMessage");
scpMgr.Config["PostUrl"] = "http://localhost:1830/asp.net/upload.aspx"; window.onload = function()
{
$("#BtnCapture").click(function() { scpMgr.Capture(); });
$("#BtnCapture2").click(function() { scpMgr.CaptureScreen(); });
$("#BtnCapture3").click(function() { scpMgr.CaptureRect(0,0,100,100); });
}
</script>
</body>
</html>标准版CAB安装包
标准版EXE安装包
专业版CAB安装包
开发文档
ASP.NET标准版示例
ASP.NET专业版示例
ASP.NET-FCKEditor2.x示例
ASP.NET-CKEditor3.x示例
ASP.NET-KindEditor3.x示例
ASP.NET-xhEditor3.x示例
JSP标准版示例
JSP专业版示例
JSP-FCKEditor2.x示例示例
JSP-CKEditor3.x示例
JSP-KindEditor3.x示例
PHP-标准版示例
PHP-专业版示例
Chrome,Firefox,IE32,IE64示例下载
crx安装包
exe安装包
ASP.NET标准版示例
ASP.NET-FCKEditor2.x示例
ASP.NET-CKEditor3.x示例
ASP.NET-KindEditor3.x示例
ASP.NET-xhEditor3.x示例
JSP标准版示例
PHP标准版示例

谢谢LS 几位回复。
1.@15L，如果是你想的这么简单我也不会提问了。
2.@18L，有可能你的ScreenCapture.js是截图把，你不提供参考我没法知道原理。
3.@19L，你的这个没用，这个是外部可视化区域的截图，有滚动条是一个积累。
4.@16L，要考虑屏幕分标率的问题，如果按照你的思路走。

额，代码找不到了. 1.需要取到截取的div 在当前页面的坐标 top , left 。需要将当前页面URL 作为参数传到后台,还有div 坐标. 2.之前使用的PHP做的后台处理. 具体是哪个记不清了。刚找了一下.http://download.csdn.net/detail/ghost_fly/2145124 可以试试这个.

也可以使用gdi+ , 大致就是需要读取当前页面根据top left 生成固定宽高图片

呵呵，才看到你看看这个帖子，它可以返回一个html元素的位置http://stackoverflow.com/questions/9217570/how-to-find-the-position-of-an-element-in-the-web-browser-control然后再怎么移动webbrowser，使得div出现在窗口中，再计算窗口、控件的位置，最后屏幕截图。挺破的办法，抛砖引玉吧。

我勒个去，凌晨回复。好吧。
我昨天能想到的一个破办法是生成rtf文件，在预览的时候同图片的形式打印出来。释放掉资源，删除rtf文件。
这个办法读写太频繁，可能没必要。看过很多都说用webbrowser的，试试这个把。

跳转到另外一个页面，用webbrowser方式来截图是Ok的，只是在有滚动条的情况下会截不到，正在想办法解决。

你就用JS将DIV移到可视区域，然后再通过CaptureRect截取这个DIV不就OK了。

最好不要依赖于当前界面上显示的，以后做成一件通用组件也很方便，做打印控件也行。1，需要使用一个页面渲染引擎，它负责解释和渲染HTML,JS，CSS等，有Gecko，Webkit,Trident（Webbrowser使用的）等，用WebBrowser可以很省事，不同的页面渲染引擎最终的输出结果有所不同，相当于同一个html或css在不同浏览器结果有所不同。这样就可以把html转换为图片。2，计算指定DIV在图片中所在的Rect,这个应该不难，根据div的ID写一段JS交给页面引擎执行（如WebBrowser）并取得返回值。3，剩下最后一步就是使用GDI+在大图中取小图了。

                        using System.Drawing;                         //打开该页面
                        System.Diagnostics.Process.Start("IEXPLORE.EXE", "http://localhost:56/Spacxxe.html");                        System.Threading.Thread.Sleep(3000);
                        //截屏                        //创建并设置画布大小
                        System.Drawing.Image templateImage = new System.Drawing.Bitmap(1040, 700);
                        System.Drawing.Graphics templateG = System.Drawing.Graphics.FromImage(templateImage);
                        //new Point(200, 100)位于源（屏幕）左上角的x,y坐标
                        //new Point(0, 0)图片位于画布左上角的x,y坐标
                        //new Size(1440, 900)所截屏幕的大小
                        templateG.CopyFromScreen(new Point(200, 100), new Point(0, 0), new Size(1000, 900), CopyPixelOperation.MergeCopy);                        //关闭ie
                        System.Diagnostics.Process[] pro = System.Diagnostics.Process.GetProcessesByName("IEXPLORE");
                        foreach (System.Diagnostics.Process ps in pro)
                        {
                            ps.Kill();
                        }                        //存
                        templateImage.Save(@"E:\TEST\" + imgname + ".jpg", System.Drawing.Imaging.ImageFormat.Jpeg);
//把定位修改一下修改成runat那种形式然后根据DivID获取就可以了

已经完成实现该功能，完全代码在
http://download.csdn.net/detail/lqbbduck/4861758思路如我上面所说的
1，需要使用一个页面渲染引擎，它负责解释和渲染HTML,JS，CSS等，有Gecko，Webkit,Trident（Webbrowser使用的）等，用WebBrowser可以很省事，不同的页面渲染引擎最终的输出结果有所不同，相当于同一个html或css在不同浏览器结果有所不同。这样就可以把html转换为图片。2，计算指定DIV在图片中所在的Rect,这个应该不难，根据div的ID写一段JS交给页面引擎执行（如WebBrowser）并取得返回值。3，剩下最后一步就是使用GDI+在大图中取小图了。
效果如下ICaputureHtmlElement cap = new CaputureHtmlElement();//抓取yahoo.com页面上的元素(id=y-col2)
Bitmap map = cap.Capture("http://www.yahoo.com", "p_13872472-main_story");
map.Save("d:/test.jpg", ImageFormat.Jpeg);

小弟也来出个主意
楼主也说了有预览功能不知是否可以把要截取的DIV的内容用正则或者javascript把这个 DIV的HTML代码发送到后台生产图片哦

最简单的方式是。把除这个DIV的所有元素隐藏。。用一段JS即可

调试易

请教一个对网页截图的问题

解决方案 »