页面截图_后台实现页面截图 - CSDN
精华内容
参与话题
  • 如何以Java实现网页截图技术

    万次阅读 热门讨论 2010-03-08 22:35:00
    今天看到某网友关于“如何以Java实现网页截图技术”的咨询帖,由于出现该咨询的地点非常不适合较长回复,故以博文形式回答。 事实上,如果您想以Java实现网页截图,也就是“输入一段网址,几秒钟过后就能截取一张...

    今天看到某网友关于“如何以Java实现网页截图技术”的咨询帖,由于出现该咨询的地点非常不适合较长回复,故以博文形式回答。

     

    事实上,如果您想以Java实现网页截图,也就是“输入一段网址,几秒钟过后就能截取一张网页缩略图”的效果。那么,您至少有3种方式可以选择。

     

    1、最直接的方式——使用Robot

     

    方法详解:该方法利用Robat提供的强大桌面操作能力,硬性调用浏览器打开指定网页,并将网页信息保存到本地。

     

    优势:简单易用,不需要任何第三方插件。

     

    缺点:不能同时处理大量数据,技术含量过低,属于应急型技巧。

     

    实现方法:使用如下代码即可。

     

     

    2、最常规的方式——利用JNI,调用第三方C/C++组件

     

    方法详解:目前来讲,Java领域对于网页截图组件的开发明显不足(商机?),当您需要完成此种操作时,算得上碰到了Java的软肋。但是,众所周知Java也拥有强大的JNI能力,可以轻易将C/C++开发的同类组件引为己用。

    优势:实现简单,只需要封装对应的DLL文件,就可以让Java实现同类功能。

     

    劣势:同其他JNI实现一样,在跨平台时存在隐患,而且您的程序将不再属于纯Java应用。

     

    实现方法:可参见此用例,具体封装何种C/C++组件请自行选择。

     

    PS:示例来源于ACA HTML to Image Converter项目(http://www.acasystems.com/en/web-thumb-activex/faq-convert-html-to-image-in-java.htm ),这是一个收费的HTML转Image第三方组件,但封装方式在Java中大同小异。

     

    引用JNI封装:

     

     

    CPP部分的实现:

     

     

    以该组件图像化yahoo界面的效果图:

     

    00


    3、最扎实的方法——自行解析HTML标记,并将其图像化

     

    方法详解:众所周知,HTML之所以在浏览器中以具体的网页格式出现,并非服务器端传了一整个应用到客户端,而是源自于浏览器对于客户端自行解析的结果。因此,只要我们将对应的解析一一实现,那么将网页图形化,就将不是什么难事。


    优势:纯Java实现,一劳永逸,一旦开发完成则永远通用,而且有一定的商用价值。

     

    劣势:开发费时,且需要针对不同语法做精确分析,才能保证输出的基本正确。尤其在涉及到JavaScript解析时,难度将尤其增大。

     

    实现方法:目前尚无具体案例可供参考。但是,由于Java有jdic之类的浏览器项目存在(https://jdic.dev.java.net/ ),而Java图形界面又属绘制生成。从理论上说,我们可以将所有具备Graphics的组件图形化保存。

     

    而如果自行解析,那么您需要建立HTML解析器(或使用第三方的,万幸Java在这方面的组件很多),了解Java2D机制,了解何时该使用drawString绘制文字,何时又该使用drawImage插入图片等等。

     


    补充:

     

    这是一个利用内置浏览器截图的示例,使用了DJNativeSwing组件。

     

    示例工程下载地址(Eclipse工程,含lib):http://greenvm.googlecode.com/files/Screenshot.7z

     

     

     

     

    展开全文
  • 网页爬虫实例一(网页截屏)

    千次阅读 2018-06-06 18:25:49
    如果碰到网页加载太慢或者需要测试兼容性的时候很是心累,如果可以利用程序自动将对应的网页截图,然后直接拿着原型跟截图比对呢,会不会稍微好一些呢?以下就是我个人写的网页爬虫小程序,程序主要是获取某网页链接...

    测试网站页面,往往是考验测试眼力的时候,大多数情况都要打开网站页面对着原型图一点点比对。如果碰到网页加载太慢或者需要测试兼容性的时候很是心累,如果可以利用程序自动将对应的网页截图,然后直接拿着原型跟截图比对呢,会不会稍微好一些呢?

    以下就是我个人写的网页爬虫小程序,程序主要是获取某网页链接及其页面中的所有有效链接,并将有效链接打开的页面截图保存到指定目录中

    coding=utf-8
    import requests
    from selenium import webdriver
    import os,time,re
    #获取搜狐网页所有有效链接,并将链接到的页面截图保存到指定目录中
    class PS_sohu(object):
        def __init__(self,path):
            self.driver=webdriver.Firefox()
            if os.path.exists(path):
                os.chdir(path)
            else:
                os.mkdir(path)
                os.chdir(path)
        #获取搜狐网页所有的有效链接
        def get_valid_link(self,url):
            response=requests.get(url)
            all_links=re.findall(r'href="(.*?)"',response.text)
            valid_links=[]
            #筛选出有效链接
            for link in list(set(all_links)):
                if re.search(r'(\.css)',link):
                    continue
                elif link.find('javascript')!=-1 or link.find('mailto')!=-1:
                    continue
                elif link.strip()==''or link.strip()=='#'or link.strip()=='/':
                    continue
                elif link.startswith('//'):
                    link='http:'+link
                    valid_links.append(link.strip())
                else:
                    valid_links.append(link.strip())
            return valid_links
        #得到有效链接的截图
        def get_picture(self,url_list):
            for url in url_list:
                try:
                    self.driver.set_page_load_timeout(10)#设置网页加载超时时间为10秒
                    self.driver.get(url)
                    self.driver.get_screenshot_as_file('%d.png'%time.time())#截取网页内容,已当前时间戳为图片命名保存
                    print self.driver.current_url#打印当前网页地址
                except:
                    s= u'当前网页超时:%s\n' %url
                    #将超时的网站保存到文件中
                    with open('test.txt','a') as f:
                        f.write(s)
                    print s
        def quit(self):
            self.driver.quit()
    if __name__=="__main__":
        path=r'd:\dd\a'
        url='http://www.xxx.com'
        ps_sh=PS_sohu(path)
        valid_links=ps_sh.get_valid_link(url)
        s_time=time.time()
        ps_sh.get_picture(valid_links)
        print '用时:%d'%(time.time()-s_time)
        ps_sh.quit()
        

    展开全文
  • 前端页面免费全屏截图技术实现

    千次阅读 2018-03-26 14:01:22
    截图是使用免费第三方插件【牛牛截图】自带在线演示DEMO,,写出来是把自个踩过坑的解决方案公布出来。在官方网站下载web文件,找出这个三个js文件引入到你自个页面中或者在我公布的链接中找到合适//获取路径中项目...

    读者好!时隔将近1年我又来发布文章了,这篇文章主要是用于交接,顺带着赚一波积分,把自个的成果展示出来,给有这方面需求的开发者们提供一些参考资料。截图是使用免费第三方插件【牛牛截图】自带在线演示DEMO,,写出来是把自个踩过坑的解决方案公布出来。
    图片描述在官方网站下载web文件,找出这个三个js文件引入到你自个页面中或者在我公布的链接中找到合适

    1. //获取路径中项目名称
    2. var ctx = '${ctx}'
    3. $(document).ready(function() {
    4. Init();
    5. });
    复制代码

    此函数用于初始化牛牛截图控件,需要在页面加载完成后立即调用。接下来是调用click截图事件了
    图片描述
    这个导出click事件就截图了,执行顺序是先截图再出模态框,模态框有其他需求,这里不做解释

    1. function showModalFram(){
    2. if(selfConnectionState()!= 2){
    3. if(confirm("您好!此功能需要截屏,需要安装截屏插件\n\n请点击确认下载并手动安装?")){
    4. selfConnection();//确定截屏插件安装完成,并连接成功
    5. return;
    6. }else{
    7. return;
    8. }
    9. }
    10. //自定义截图,传入截图后文件名
    11. StartUpdateCapture("NoNIconPicture");
    12. }
    复制代码

    showModalFram()这个函数里面的代码主要作用判断浏览器是否安装好牛牛截图插件。模态框的功能我删除掉了,不影响截图功能。其中的selfConnectionState()函数是我在官方提供js文件capturewrapper.js添加新的函数

    1. function selfConnection(){
    2. //获取当前牛牛截图连接状态
    3. captureObj.connectHost();
    4. if(selfConnectionState != 2){
    5. window.location="http://www.ggniu.cn/download/CaptureInstall.exe";
    6. }
    7. }
    8. function selfConnectionState(){
    9. console.log("connectionState:"+captureObj.connectState);
    10. return captureObj.connectState;
    11. }
    复制代码

    当牛牛截图连接成功(这里有个缺陷不能一次安装成功后永久不用安装,每次重启笔记本使用这个功能都会提示下载截图插件提示,这个问题我想了很久都没有好的解决方案),走我自定义截图函数 StartUpdateCapture(fileName);

    1. //自定义截图函数
    2. function StartUpdateCapture(fileName)
    3. {
    4. fileName = fileName+".jpg";
    5. var captureRet = captureUpdate(fileName);
    6. //从返回值来解析显示
    7. if(captureRet == emCaptureFailed || captureRet == emCaptureUnknown) {
    8. //window.location="http://www.ggniu.cn/download/CaptureInstall.exe";
    9. }
    10. }
    11. //把牛牛截图多个模式截图方式中选择全屏截图
    12. function captureUpdate(fileName){
    13. return captureObj.DoCapture(fileName, 0, 1, 0, 200, 1900, 820);
    14. }
    复制代码

    captureUpdate(fileName)函数也是我自定义,从capture()函数中提供全屏截图的方法提取出来。
    到此截图功能写完,那么截图会保存在C:\Users\XXX(计算机名)文件夹下,下面就是把截图好的图片上传到项目中
    也是在官方提供js文件capturewrapper.js中找到UploadCaptureData(content, localpath)

    1. //控制上传
    2. function UploadCaptureData(content, localpath)
    3. {
    4. savedPictureContent = content;
    5. //获取图片的扩展名
    6. var pos = localpath.lastIndexOf('.');
    7. extendName = localpath.substr(pos + 1);
    8. fileName = localpath.substr(localpath.lastIndexOf('\\')+1);
    9. UploadData();
    10. /*$('#show').html('截图已经完成,请点击');
    11. $('#show').show();
    12. var autoUpload = $("#autoupload").attr("checked")=="checked" ? 1 : 0;
    13. if(autoUpload)
    14. {
    15. UploadData();
    16. }
    17. else
    18. {
    19. $('#btnUpload').show();
    20. } */
    21. }
    复制代码

    这函数里面有我注释掉的,那是因为我不需要这些, UploadData()方法把截图的文件上传到你的项目

    1. /*
    2. 实际上传图像数据的函数,此处主要是将BASE64的图像数据,通过AJAX的方式POST到服务器保存成文件,并且显示在页面上
    3. */
    4. function UploadData()
    5. {
    6. //上传的数据除了图片外,还可以包含自己需要传递的参数
    7. var data = "fileName="+fileName+"&picdata=" + savedPictureContent;
    8. //获取路径中项目名称
    9. ctx = ctx.replace('a','f');
    10. $.ajax({
    11. type: "POST",
    12. url: ctx+"/station/uploadScreenshotPicture",
    13. dataType: "json",
    14. data: data,
    15. success: function () {}});
    16. }
    复制代码

    这个UploadData()中的ctx 变量是我获取们项目名称的方式,可以根据自己的获取项目名称方式来现实,不要照搬我的
    最后是后端处理图片bsse64流了

    1. @RequestMapping(value = "uploadScreenshotPicture",method = RequestMethod.POST)
    2. @ResponseBody
    3. public void uploadScreenshotPicture(HttpServletRequest request){
    4. try{
    5. String picdata = request.getParameter("picdata").replaceAll(" ", "+");
    6. String fileName = request.getParameter("fileName");
    7. //项目在本地的路径
    8. String systemPath =request.getSession().getServletContext().getRealPath("");
    9. File screenshotFile = new File(systemPath+"\\uploadPath\\screenshotPicture");
    10. if(!screenshotFile.exists()){
    11. screenshotFile.mkdirs();
    12. }
    13. systemPath = systemPath+"\\uploadPath\\screenshotPicture";
    14. aqMonitorStationService.generateImage(picdata,systemPath+"\\"+fileName);
    15. }catch (Exception e){}
    16. }
    17. /**
    18. * base64字符串转化成图片
    19. * @param imgStr base64字符串
    20. * @param imagePath 转换图片地址
    21. * @return
    22. */
    23. public static boolean generateImage(String imgStr,String imagePath) {
    24. if (imgStr == null){//图像数据为空
    25. return false;
    26. }
    27. BASE64Decoder decoder = new BASE64Decoder();
    28. try {
    29. byte[] decodeBuffer = decoder.decodeBuffer(imgStr);
    30. FileOutputStream fileOutputStream = new FileOutputStream(imagePath);
    31. fileOutputStream.write(decodeBuffer);
    32. fileOutputStream.flush();
    33. fileOutputStream.close();
    34. return true;
    35. }
    36. catch (Exception e) {
    37. return false;
    38. }
    39. }
    复制代码

    到此截图功能写完,这是截取一张图片所走的流程,而我项目需求是自动截图我也把这个功能实现了

    更多web资源:http://www.makeru.com.cn/    web学习交流群:362513833

    展开全文
  • <html> <head> <meta name="layout" content="main"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />...script type="text/javascript" src="js/jquery.min.js...
    <html>
    <head>
    <meta name="layout" content="main">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/html2canvas.min.js"></script>
    <style>
    .photoPic { width: 100%; position: fixed; top: 0; left: 0; bottom: 0; background: rgba(0,0,0,.4); z-index: 2; transition: all 1s; display: none; }
    .photoPic span { width: 100%; text-align: center; line-height: 40px; display: inline-block; color: #fff; }
    .photoPic img { width: 100%; transform: scale(1.1); transition: all .2s; }
    .animate { height: 100%; opacity: 1;}
    .animate img { transform: scale(1); }
    .imgbox { position: relative; margin: 0 5%; width: 90%; }
    .imgbox i { position: absolute; right: 2%; top: 14px; z-index: 3; color: #fff;width: 14px; height:14px; padding-top: 2px; text-align: center; font-style: normal; box-sizing: border-box;  background: url(images/img_201809.png) no-repeat; }
    </style>
    <script type="text/javascript" >  
    	$(document).ready( function(){  
    			var dd = document.getElementsByClassName("ss");
    			$(".example").on("click", function(event) {  
    					event.preventDefault();  
    					html2canvas(dd, {  
    					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);
    						$("#photoPic img").attr("src",canvas.toDataURL());
    						$("#photoPic").fadeIn();
    						$("#photoPic").addClass("animate");  
    					}  
    				});  
    			});   
    			$(".imgbox i").click(function(){
    				$("#photoPic").hide();
    			});
    	});  
    </script>
    </head>
    <body>
    <div class="ss" style="background-color: #abc;">测试html5页面截图</div>
    <input class="example" type="button" value="button">
    
    <div id='photoPic' class="photoPic">
      <div class="imgbox">
          <span>长按保存图片</span>
          <i></i>
          <img src="" alt="" />
      </div>
    </div>
    </body>
    </html>
    

    说明在测试过程中出现的问题如果页面上引用跨域的图片文件调用toDataURL的时候会出错

    SecurityError: The operation is insecure.  

    解决方法:在跨域的服务器上设置header设置为允许跨域请求

    access-control-allow-origin: *  access-control-allow-credentials: true  

     

    展开全文
  • //首先下载 html2canvas 插件 npm install html2canvas //进到页面去后台拿二维码图片把整个页面通过html2canvas 插件转为base64编码放到img标签中然后定位在 长按保存图片的按钮上 设置css opacity:0过程中会遇到 ...
  • 网页截屏

    千次阅读 2019-05-24 18:49:40
    按F12弹出调试台 按ctrl+shift+p出现功能框 输入cap选择第二项 在文件夹中显示下载的图片 打开图片会看到全屏的网页已在一张图片中了
  • Python网页自动截图

    万次阅读 2017-08-04 14:20:57
    Python网页自动截图,你值得拥有~
  • <!DOCTYPE html> ; charset=utf-8" /> <script type="text/javascript" src=
  • 对整个网页进行长截图

    万次阅读 2020-03-01 11:49:29
    工作中经常遇到会对网页进行截图的事情...这里推荐一款在线的网页截图工具PickFrom-网页截图工具,仅需要普通的浏览器就可以将一个长网页进行完整截图。 1 打开PickFrom 在浏览器地址栏中输入 https://zh.pickfrom...
  • 不仅支持区域截图,还支持完整的长网页截图。 1,安装下载 下载地址:Chrome网上应用店 2,使用说明 (1)插件安装完毕后。如果需要对网页截图,只需要点击工具栏上的 FireShot 图
  • 谷歌浏览器如何截屏整个页面

    千次阅读 2019-07-07 10:46:35
    1、F12打开控制台 2、ctrl+shift+p 3、输入screen 4、选择Capture full size screenshot 5、坐等几秒 大功告成
  • 我觉得有必要出一篇截取整个网页内容的博客了,今天上网一搜,居然没有~ 不需要下载任何其他的软件,这次咱们使用的工具就是咱们每个Windows电脑上都有的截图工具,在下方Windows窗口中的Windows附件里面就能找到。...
  • 使用谷歌浏览器截图整个网页

    千次阅读 2019-02-28 19:39:20
    1、首先打开想要截图网页,按键盘快捷键F12,打开开发人员工具功能。 2、在开发工具页面同时按下Ctrl + Shift + P,出现输入指令的工具栏 3、在工具栏输入Capture full size screenshot 4、点击键盘回车键,会...
  • 利用Google Chrome滚动截屏 1. 在Chrome浏览器中打开一个网址,比如www.master8687.cn,然后再页面中鼠标右键,选择 检查 项。 ...4. 此时则会在浏览器下方出现滚动屏幕截图的下载文件 ...
  • FireShot是一个简单实用的网页截图工具,可以截取整个页面、可见部分和选定区域,并且支持拖动加载截图,非常方便。
  • 教你如何截取网站整个网页截图

    千次阅读 2014-01-11 14:19:51
    很多同学有时候需要把一个网页的整个页面截图,但是用QQ截图只能截取电脑屏幕上显示的部分,网页上没有显示出来的部分就截不出来了。  今天菜鸟之家就教大家如何把一个网页的整个页面截图出来。  首先...
  • 如何实现网页版滚动截图

    千次阅读 2019-04-22 20:00:20
    如何实现网页版滚动截图 不是长截图,只截图当前页面的话使用QQ截图(Ctrl+Shift+a)微信截图(Alt+a)即可 方法一 工具:浏览器即可 按键盘上的F12按键,打开浏览器的console菜单 接着,按组合键Ctrl+...
  • 有些网页比较长,一屏装不下,需要拉动滚动条才行,这种网页我们想截图截取全部内容时就比较困难 如果使用的是Chrome浏览器,可以使用如下方法截图: 打开网页后按快捷键 F12 打开移动设备预览模式(点亮下图中...
  • 谷歌浏览器截图(截取整个网页

    千次阅读 2019-04-10 18:16:26
    1、按下键盘上的F12键,进入开发者工具 ...补充说明:截图自动保存保存为png格式的图片文件,可右击打开保存路径的文件夹查看 另外:一般截取屏幕的某一部分的话,可利用QQ自带的截图功能,十分方便。 ...
  • 1.按f12,把控制台调出来。...2.按键盘ctrl+shift+p,调出功能搜索,然后选择功能:Capture full size screenshot(只输前几个字母就能找到),敲下回车,网页就会弹出下载图片框,保存就行了。 ...
1 2 3 4 5 ... 20
收藏数 148,377
精华内容 59,350
关键字:

页面截图