前端页面免费全屏截图技术实现

读者好！时隔将近1年我又来发布文章了，这篇文章主要是用于交接，顺带着赚一波积分，把自个的成果展示出来，给有这方面需求的开发者们提供一些参考资料。截图是使用免费第三方插件【牛牛截图】自带在线演示DEMO,，写出来是把自个踩过坑的解决方案公布出来。 在官方网站下载web文件，找出这个三个js文件引入到你自个页面中或者在我公布的链接中找到合适 //获取路径中项目名称 var ctx = '${ctx}' $(document).ready(function() { Init(); }）； 复制代码 此函数用于初始化牛牛截图控件,需要在页面加载完成后立即调用。接下来是调用click截图事件了 这个导出click事件就截图了，执行顺序是先截图再出模态框，模态框有其他需求，这里不做解释 function showModalFram(){ if(selfConnectionState()!= 2){ if(confirm("您好！此功能需要截屏，需要安装截屏插件\n\n请点击确认下载并手动安装？")){ selfConnection();//确定截屏插件安装完成，并连接成功 return; }else{ return; } } //自定义截图，传入截图后文件名 StartUpdateCapture("NoNIconPicture"); } 复制代码 showModalFram()这个函数里面的代码主要作用判断浏览器是否安装好牛牛截图插件。模态框的功能我删除掉了，不影响截图功能。其中的selfConnectionState()函数是我在官方提供js文件capturewrapper.js添加新的函数 function selfConnection(){ //获取当前牛牛截图连接状态 captureObj.connectHost(); if(selfConnectionState != 2){ window.location="http://www.ggniu.cn/download/CaptureInstall.exe"; } } function selfConnectionState(){ console.log("connectionState："+captureObj.connectState); return captureObj.connectState; } 复制代码 当牛牛截图连接成功（这里有个缺陷不能一次安装成功后永久不用安装，每次重启笔记本使用这个功能都会提示下载截图插件提示，这个问题我想了很久都没有好的解决方案），走我自定义截图函数 StartUpdateCapture(fileName); //自定义截图函数 function StartUpdateCapture(fileName) { fileName = fileName+".jpg"; var captureRet = captureUpdate(fileName); //从返回值来解析显示 if(captureRet == emCaptureFailed || captureRet == emCaptureUnknown) { //window.location="http://www.ggniu.cn/download/CaptureInstall.exe"; } } //把牛牛截图多个模式截图方式中选择全屏截图 function captureUpdate(fileName){ return captureObj.DoCapture(fileName, 0, 1, 0, 200, 1900, 820); } 复制代码 captureUpdate(fileName)函数也是我自定义，从capture()函数中提供全屏截图的方法提取出来。 到此截图功能写完，那么截图会保存在C:\Users\XXX(计算机名)文件夹下，下面就是把截图好的图片上传到项目中 也是在官方提供js文件capturewrapper.js中找到UploadCaptureData(content, localpath) //控制上传 function UploadCaptureData(content, localpath) { savedPictureContent = content; //获取图片的扩展名 var pos = localpath.lastIndexOf('.'); extendName = localpath.substr(pos + 1); fileName = localpath.substr(localpath.lastIndexOf('\\')+1); UploadData(); /*$('#show').html('截图已经完成，请点击'); $('#show').show(); var autoUpload = $("#autoupload").attr("checked")=="checked" ? 1 : 0; if(autoUpload) { UploadData(); } else { $('#btnUpload').show(); } */ } 复制代码 这函数里面有我注释掉的，那是因为我不需要这些， UploadData()方法把截图的文件上传到你的项目 /* 实际上传图像数据的函数，此处主要是将BASE64的图像数据，通过AJAX的方式POST到服务器保存成文件，并且显示在页面上 */ function UploadData() { //上传的数据除了图片外，还可以包含自己需要传递的参数 var data = "fileName="+fileName+"&picdata=" + savedPictureContent; //获取路径中项目名称 ctx = ctx.replace('a','f'); $.ajax({ type: "POST", url: ctx+"/station/uploadScreenshotPicture", dataType: "json", data: data, success: function () {}}); } 复制代码 这个UploadData()中的ctx 变量是我获取们项目名称的方式，可以根据自己的获取项目名称方式来现实，不要照搬我的 最后是后端处理图片bsse64流了 @RequestMapping(value = "uploadScreenshotPicture",method = RequestMethod.POST) @ResponseBody public void uploadScreenshotPicture(HttpServletRequest request){ try{ String picdata = request.getParameter("picdata").replaceAll(" ", "+"); String fileName = request.getParameter("fileName"); //项目在本地的路径 String systemPath =request.getSession().getServletContext().getRealPath(""); File screenshotFile = new File(systemPath+"\\uploadPath\\screenshotPicture"); if(!screenshotFile.exists()){ screenshotFile.mkdirs(); } systemPath = systemPath+"\\uploadPath\\screenshotPicture"; aqMonitorStationService.generateImage(picdata,systemPath+"\\"+fileName); }catch (Exception e){} } /** * base64字符串转化成图片 * @param imgStr base64字符串 * @param imagePath 转换图片地址 * @return */ public static boolean generateImage(String imgStr,String imagePath) { if (imgStr == null){//图像数据为空 return false; } BASE64Decoder decoder = new BASE64Decoder(); try { byte[] decodeBuffer = decoder.decodeBuffer(imgStr); FileOutputStream fileOutputStream = new FileOutputStream(imagePath); fileOutputStream.write(decodeBuffer); fileOutputStream.flush(); fileOutputStream.close(); return true; } catch (Exception e) { return false; } } 复制代码 到此截图功能写完，这是截取一张图片所走的流程，而我项目需求是自动截图我也把这个功能实现了 更多web资源：http://www.makeru.com.cn/    web学习交流群：362513833