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

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

//获取路径中项目名称
var ctx = '${ctx}'
$(document).ready(function() {
    Init();
}）；

此函数用于初始化牛牛截图控件,需要在页面加载完成后立即调用。接下来是调用click截图事件了

这个导出click事件就截图了，执行顺序是先截图再出模态框，模态框有其他需求，这里不做解释

function showModalFram(){
    if(selfConnectionState()!= 2){
 if(confirm("您好！此功能需要截屏，需要安装截屏插件nn请点击确认下载并手动安装？")){
     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:UsersXXX(计算机名)文件夹下，下面就是把截图好的图片上传到项目中
也是在官方提供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();
    
}

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

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){}

    }

    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;
 }
    }

到此截图功能写完，这是截取一张图片所走的流程，而我项目需求是自动截图我也把这个功能实现了
下面我提供下官方文件和我修改官方文件传上来。
https://pan.baidu.com/s/1jKd7fsa
我建议使用我修改官方文件，

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

JavaScript相关栏目本月热门文章