各位一个对网页截图的有关问题，望能给点思路

2013-01-06

求助各位一个对网页截图的问题，望能给点思路现在有一个网页，网页内有一个DIV，需要实现对这个div截图并保存

求助各位一个对网页截图的问题，望能给点思路

现在有一个网页，网页内有一个DIV，需要实现对这个div截图并保存。（不是对整个网页，仅仅是某DIV）

各位能否给点思路和参考。

[解决办法]
各位一个对网页截图的有关问题，望能给点思路打酱油的
[解决办法]
把这个div预览出来，调用整个页面的样式，预览只显示这个div的内容，然后截图预览的过程可以隐藏起来，用户前端看不到。
[解决办法]

[解决办法]

就素说！！！
[解决办法]

学习酱油
[解决办法]

引用:

现在有一个网页，网页内有一个DIV，需要实现对这个div截图并保存。（不是对整个网页，仅仅是某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>

[解决办法]

与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标准版示例

[解决办法]
额，这个之前做过。  很久了。  等下我去找找看
[解决办法]
额，代码找不到了.

1.需要取到截取的div 在当前页面的坐标  top , left 。需要将当前页面URL 作为参数传到后台,还有div 坐标.

2.之前使用的PHP做的后台处理. 具体是哪个记不清了。刚找了一下.http://download.csdn.net/detail/ghost_fly/2145124 可以试试这个.
[解决办法]
也可以使用gdi+  ,  大致就是需要读取当前页面根据top left 生成固定宽高图片
[解决办法]

引用:

引用:额，代码找不到了.

1.需要取到截取的div 在当前页面的坐标 top , left 。需要将当前页面URL 作为参数传到后台,还有div 坐标.

2.之前使用的PHP做的后台处理. 具体是哪个记不清了。刚找了一下.http://download.csdn.net/detail/ghost_fly/2145……

这种方式生成出来的图片.会有瑕疵. 分辨率不高。
[解决办法]
呵呵，才看到

你看看这个帖子，它可以返回一个html元素的位置

http://stackoverflow.com/questions/9217570/how-to-find-the-position-of-an-element-in-the-web-browser-control

然后再怎么移动webbrowser，使得div出现在窗口中，再计算窗口、控件的位置，最后屏幕截图。挺破的办法，抛砖引玉吧。
[解决办法]
最好不要依赖于当前界面上显示的，以后做成一件通用组件也很方便，做打印控件也行。

1，需要使用一个页面渲染引擎，它负责解释和渲染HTML,JS，CSS等，有Gecko，Webkit,Trident（Webbrowser使用的）等，用WebBrowser可以很省事，不同的页面渲染引擎最终的输出结果有所不同，相当于同一个html或css在不同浏览器结果有所不同。这样就可以把html转换为图片。

2，计算指定DIV在图片中所在的Rect,这个应该不难，根据div的ID写一段JS交给页面引擎执行（如WebBrowser）并取得返回值。

3，剩下最后一步就是使用GDI+在大图中取小图了。

热点排行