web前端页面全屏截图技术实现(插件【牛牛截图】)

最新推荐文章于 2024-05-21 10:41:43 发布

jia814583973

最新推荐文章于 2024-05-21 10:41:43 发布

阅读量2.2k

点赞数 1

文章标签： js web html javascript

原文链接：https://blog.csdn.net/farsight1/article/details/79697275

版权

web前端页面全屏截图技术实现(插件【牛牛截图】)

前段时间项目中需要用到截图，看了好多文章，最终得到实现像微信和QQ的截屏方式都得用一些插件（大佬除外），然后找了一个插件还挺好用，直接上代码吧需要的直接粘贴就行。

注意：请先运行插件，再进行操作
插件下载地址：http://www.ggniu.cn/download/CaptureInstall.exe
主要有三个js:https://download.csdn.net/download/jia814583973/15739899

1.前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="javascript" src="../js/jquery-1.6.4.min.js"></script>
    <script language="javascript" src="../js/niuniucapture.js"></script>
    <script language="javascript" src="../js/capturewrapper.js"></script>
    <script language="javascript" src="../js/jquery.json-2.3.min.js"></script>
    <style>
        #jp{
            width: 40px;
            height: 21px;
            background-color: #38B1B9;
        }
    </style>
</head>
<body>
<div id="jp" class="capture1">截屏</div>
</body>
<script>
   $(function () {
       Init();
   });
   $('.capture1').click(function () {
       showModalFram();
   });

   function showModalFram(){
       if(selfConnectionState()!= 2){
           if(confirm("您好！此功能需要截屏，需要安装截屏插件\n\n请点击确认下载并手动安装？")){
               selfConnection();//确定截屏插件安装完成，并连接成功
               return;
           }else{
               return;
           }
       }
       //自定义截图，传入截图后文件名
       var myDate = new Date();
       var year = myDate.getFullYear(),
           month = myDate.getMonth() + 1,
           dates = myDate.getDate(),
           hour = myDate.getHours() + '',
           min = myDate.getMinutes() + '',
           sec = myDate.getSeconds() + '';
       var mytime = "_"+year +
                       (month.length == 1 ? '0' + month : month)+
                       (dates.length == 1 ? '0' + dates : dates)+
                       (hour.length == 1 ? '0' + hour : hour) +
                       (min.length == 1 ? '0' + min : min) +
                       (sec.length == 1 ? '0' + sec : sec);
       console.log(mytime)
       StartUpdateCapture(mytime);
   }
   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;
   }

   //自定义截图函数
   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){
       /**DoCapture参数说明：
        * 参数1：fileName 截图完成时自动保存的文件名
        * 参数2：是否要隐藏当前浏览器窗口(1表示截图时隐藏当前窗口，0表示截图时不隐藏当前窗口。)
        * 参数3：标识截图的方式(0：表示普通截图
                            1：表示截取指定区域，区域由x、y、width、height参数指定
                            2：表示截取当前桌面
                            3: 表示截图时先弹出一个提示窗口
                            4: 从剪贴板中获取图片)
        * 参数4/5/6/7：参数3autoCapture的值为1时表示自动截取指定区域。
                            当参数3autoCapture为3时:
                            a. 如果全0，则弹出预截图窗口后再选择区域
                            b. 如果全是1，则弹出预截图窗口后，自动截取整个桌面
                            c. 其他情况，弹出预截图窗口后，自动截取指定的区域
        **/
       return captureObj.DoCapture(fileName, 1, 3, 0, 0, 0, 0);
   }

   //控制上传
   function UploadCaptureData(content, localpath)
   {
       savedPictureContent = content;
        //获取图片的扩展名
       var pos = localpath.lastIndexOf('.');
       extendName = localpath.substr(pos + 1);
       var fileName = localpath.substr(localpath.lastIndexOf('\\')+1);
       UploadData(fileName);
       /*$('#show').html('截图已经完成，请点击');
       $('#show').show();
       var autoUpload = $("#autoupload").attr("checked")=="checked" ? 1 : 0;
       if(autoUpload)
       {
       UploadData();
       }
       else
       {
       $('#btnUpload').show();
       } */
   }

   //实际上传图像数据的函数，此处主要是将BASE64的图像数据，通过AJAX的方式POST到服务器保存成文件，并且显示在页面上
   function UploadData(fileName) {
       //上传的数据除了图片外，还可以包含自己需要传递的参数
       var dataPra = "fileName="+fileName+"&picdata=" + savedPictureContent;
       //获取路径中项目名称
       $.ajax({
           type: "POST",
           url: "/jp/uploadScreenshotPicture",
           dataType: "json",
           data: dataPra,
           success: function () {
               alert("上传成功");
           }
       });
   }
</script>
</html>

2.java代码

package com.jdl.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import sun.misc.BASE64Decoder;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.FileOutputStream;

/**
 * @Descriptions 牛牛截屏
 * @Author:JDL
 * @Time:2021/3/11 15:11
 */
@Controller
@RequestMapping(value = "/jp")
public class JpController {

    @RequestMapping(value = "uploadScreenshotPicture",method = RequestMethod.POST)
    @ResponseBody
    public void uploadScreenshotPicture(HttpServletRequest request){
        try{
            String picdata = request.getParameter("picdata").replaceAll(" ", "+");
            String fileName = request.getParameter("fileName");
            //fileName = "截屏_"+ DateHelper.getNow();
            //项目在本地的路径
            String systemPath =request.getSession().getServletContext().getRealPath("");
            //File screenshotFile = new File(systemPath+"\\uploadPath\\screenshotPicture");
            File screenshotFile = new File("D:/upload1/jp");
            if(!screenshotFile.exists()){
                screenshotFile.mkdirs();
            }
            //systemPath = systemPath+"\\uploadPath\\screenshotPicture";
            systemPath = "D:/upload1/jp";
            boolean flag = JpController.generateImage(picdata,systemPath+"/"+fileName);
        }catch (Exception e){
            e.printStackTrace();
        }
    }
    /**
     * 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;
        }
    }
}

jia814583973

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
web前端页面全屏截图技术实现(插件【牛牛截图】)

web前端页面全屏截图技术实现(插件【牛牛截图】)前段时间项目中需要用到截图，看了好多文章，实现像微信和QQ的截屏方式都得用一些插件（大佬除外），直接上代码吧。注意：请先运行插件，再进行操作插件下载地址：http://www.ggniu.cn/download/CaptureInstall.exe主要有三个js:https://download.csdn.net/download/jia814583973/157398991.前端代码<!DOCTYPE html><htm
复制链接

扫一扫