前端页面免费全屏截图技术实现-蒲公英云

读者好！时隔将近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();