自动完成网页局部区域截图的方法

文章介绍了如何使用自动化工具精确截图网页上的特定元素,如汇率中间价走势图。通过【打开网页】和【保存网页】步骤,结合选取元素区域,可以实现只保存有价值内容的截图,避免了手动截图的不便和二次裁剪的不准确性。这种方法适用于任何可见的页面元素,提高了工作效率。
摘要由CSDN通过智能技术生成

        一般网页包含标题、导航、正文、图片、广告、外链等内容,但只有正文内容对我们才有价值,或者我们只关心其中的数据分析图表。希望把网页有价值的区域截图下来,在手工截图时,可以利用截图工具选择截图区域,那么能自动截图时只截取有价值的区域该怎么操作呢?

        分析这个有价值内容的区域,实际上也是一个页面html元素,因此只需要截图这个元素就可以了。正如下面的网页,我们希望自动截图页面中的汇率中间价走势图。
 

待截图页面区域预览


        首先在木头浏览器项目管理窗口新建【打开网页】步骤,添加需要截图的网址,这样在项目执行过程中,首先自动打开这个网页。也可以点击【单步测试】按钮,浏览器自动打开网页,以便进行后续步骤设置。
 


        再新建一个【保存网页】步骤,在这里可以保存项目变量、网页源码和网页截图。先勾选保存网页内容,再选择截图元素区域,设定保存截图的文件格式为Jpeg,文件名选择{_CurrentDate}表示以当前日期命名截图文件。
        如果需要对图片进行二次裁剪,可以设定裁剪左边距、顶边距、宽度和高度。实际上可以选择整个页面截图,然后进行二次裁剪来达到局部截图效果,但往往难以确定裁剪参数,而且浏览器窗体大小变化会引起裁剪参数变化,造成区域截图不准确。
        为实现精准的截图区域控制,我们采用第二种方法,直接使用元素区域截图,这样软件就需要知道具体哪个元素需要截图。首先点击【自动截图】按钮,浏览器进入获取元素状态,把鼠标移动走势图上,点击右键弹出菜单中选择【获取元素】,返回项目管理器窗体,成功获得可唯一标识走势图的元素属性。        
 


        同样的通过点击【单步测试】按钮,测试一下截图效果,浏览器截图后,在窗口中下角显示截图文件保存路径,点击此链接就可以打开文件。
 


        打开浏览器默认的截图文件保存目录,可以看到已保存的自动截图的文件,只包含设定的网页区域内容。
 


        回看整个操作步骤,指定了具体截图区域的网页元素,所以区域截图支持任意可见的页面元素,包括文字、表单、段落、列表和图片等。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值