[英]Saving a web page as image
作为一个业余爱好项目,我正在探索将网页(HTML)保存为图像的方法, 主要是使用c / c ++ / javascript / java 编程 。 直到现在我遇到了以下几种方式:
获取页面主体的IHTMLElement
并使用它来查询IHTMLElementRender
,然后使用其DrawToDC
方法( 参考: http : //www.codeproject.com/KB/IP/htmlimagecapture.aspx )。 但问题是它并不适用于所有页面(主要是嵌入了iframe的页面)。
我能想到的另一种方法是使用一些Web浏览器组件,当页面完全加载后,使用BitBlt
捕获它( 参考: http : //msdn.microsoft.com/en-us/library/dd183370%28VS.85 %29.aspx )。 但问题是我请求的页面可能比我的屏幕大小更长,并且它不适合Web浏览器组件。
我们非常感谢任何解决上述问题或替代方法的方向/建议。
如果你使用Python,那就是pywebshot和webkit2png 。 但是,它们都有一些依赖关系。
编辑:糟糕,Python不在您的首选语言列表中。 无论如何,我会在这里留下这个答案,因为你说“大部分”而不是“完全”。
另一个(有点迂回)选项是运行像Tomcat这样的服务器并使用Java来调用命令行工具来截取屏幕截图。 谷歌搜索“命令行截图窗口”提出了一些合理的可能性。 但是,除了运行服务器之外,我不知道从javascript运行本地可执行文件的好方法。 但是这种方法会使它成为跨浏览器,这是一个加分(当你想要一个截图时,只需对脚本进行ajax调用)。
不幸的是,我实际上并不知道如何部署war文件。 使用Tomcat可能会更麻烦; 我提到它是因为Java是首选语言。 运行XAMPP并使用这个PHP代码段相当简单,你真的不需要学习php:
<?php
exec("/path/to/exec args");
?>
编辑
你知道,我不确定这真的能回答你的问题。 这是一种方式,但它是从JavaScript端而不是脚本端来实现的。 如果你想通过脚本来做,你可以随时使用Selenium。 它支持捕获整个页面的屏幕截图,并且可以通过Java进行控制。
最后通过这两篇文章能够破解它:
无法共享代码,但以上两篇文章将为您提供最佳解决方案。
另外看看:
https://addons.mozilla.org/en-US/firefox/addon/3408/ [firefox + javascript]
以上事情还可以。 但不保证始终工作。 检查以下链接: 如何使用IViewObject :: Draw渲染画布的可滚动区域?
如果你可以使用javascript,我建议使用phantomjs
来自http://fcargoet.evolix.net/的示例
var page = new WebPage(),
address = 'http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/feed-viewer/feed-viewer.html';
page.viewportSize = {
width : 800,
height : 600
};
// define the components we want to capture
var components = [{
output : 'feed-viewer-left.png',
//ExtJS has a nice component query engine
selector : 'feedpanel'
},{
output : 'feed-viewer-preview-btn.png',
selector : 'feeddetail > feedgrid > toolbar > cycle'
},{
output : 'feed-viewer-collapsed.png',
//executed before the rendering
before : function(){
var panel = Ext.ComponentQuery.query('feedpanel')[0];
panel.animCollapse = false; // cancel animation, no need to wait before capture
panel.collapse();
},
selector : 'viewport'
}];
page.open(address, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
} else {
/*
* give some time to ExtJS to
* - render the application
* - load asynchronous data
*/
window.setTimeout(function () {
components.forEach(function(component){
//execute the before function
component.before && page.evaluate(component.before);
// get the rectangular area to capture
/*
* page.evaluate() is sandboxed
* so that 'component' is not defined.
*
* It should be possible to pass variables in phantomjs 1.5
* but for now, workaround!
*/
eval('function workaround(){ window.componentSelector = "' + component.selector + '";}')
page.evaluate(workaround);
var rect = page.evaluate(function(){
// find the component
var comp = Ext.ComponentQuery.query(window.componentSelector)[0];
// get its bounding box
var box = comp.el.getBox();
// box is {x, y, width, height}
// we want {top, left, width, height}
box.top = box.y;
box.left = box.x;
return box;
});
page.clipRect = rect;
page.render(component.output);
});
// job done, exit
phantom.exit();
}, 2000);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.