牛牛截图控件浏览器版调用说明.docx
- 文档编号:8839257
- 上传时间:2023-02-02
- 格式:DOCX
- 页数:16
- 大小:23.19KB
牛牛截图控件浏览器版调用说明.docx
《牛牛截图控件浏览器版调用说明.docx》由会员分享,可在线阅读,更多相关《牛牛截图控件浏览器版调用说明.docx(16页珍藏版)》请在冰豆网上搜索。
牛牛截图控件浏览器版调用说明
牛牛截图控件浏览器版调用说明
本说明文档旨在对截图控件的浏览器控件进行说明,指导调用者顺利的将截图控件集成进第三方网页中,使第三方网页也能拥有完美的牛牛截图功能。
牛牛截图网页演示页面请访问:
写在前面的话:
牛牛截图控件目前支持的功能比较丰富,接口比较丰富,但能保证基本功能的接口并不复杂,在查看文档时,请自行根据自己的需求查看相应的接口;添加水印、获取剪贴板中的图片属于高级功能,如果不需要,这部分可以忽略。
提醒:
牛牛截图的核心的调用代码已经全部封装在了niuniucapture.js中,一般情况下,你不需要修改只文件内容,只需要引用,并且自己另外写JS来与UI集成即可,具体见示例(capturewrapper.js)。
牛牛截图控件浏览器版能在目前所有的主流浏览器上正常工作,以下的接口说明适用于所有浏览器,并且提供相应的Javascript调用示例。
控件主要有三个接口:
InitCapture,InitParam以及Capture,这些接口均是暴露给浏览器的Javascript调用,具体可以参考调用WebNiuniuCapturedemo_source.zip,接口的具体描述如下:
1.接口初始化接口
intInitCapture(constchar*szAuth);
此接口函数用于初始化截图控件的授权信息,默认的授权码为:
"niuniu"。
参数说明:
参数名
参数类型
参数说明
备注
szAuth
字符串
接口调用的授权码
默认的授权码为:
"niuniu"
2.参数初始化接口
intInitParam(intflag,unsignedlongflagvalue);
此接口函数用于初始化截图各个状态下的界面的显示效果,如果不调用,则以默认值处理。
参数说明:
参数名
参数类型
参数说明
备注
flag
int
要设置的参数项
此处对应的枚举ExtendFlagTypeEnum的整形值
flagvalue
unsignedlong
设置的参数值
根据不同的枚举来设置不同的值
枚举定义如下:
typedefenumExtendFlagTypeEnum
{
emPensize=1,//
emDrawType,//
emTrackColor,//
emEditBorderColor,//
emTransparent,//
emWindowAware,
emDetectSubWindowRect,
emSetSaveName,
emSetMagnifierBkColor,//设置放大镜的背景色,不设置则透明
emSetMagnifierLogoText,//设置放大镜上的LOGO字符,可提示快捷键,如:
牛牛截图(CTRL+SHIFT+A)
emSetPreCaptureWindowTitle,//设置网页上截图时弹出窗口的标题
emSetPreCaptureWindowTransparent=18,//设置预截图窗口的透明度
emSetWatermarkPictureType=20,//设置水印的类型
emSetWatermarkPicturePath,//设置水印的路径
emSetWatermarkTextType,//设置水印文字的类型
emSetWatermarkTextValue,//设置水印文字
emSetMosaicType,//设置马赛克的样式
emSetTooltipText,//设置工具栏图标的TOOLTIP及完成按钮的文字
};
枚举项的说明如下:
枚举参数名
枚举对应数值
参数值说明
备注
emPensize
1
设置画笔大小
如不设置,默认为2
emDrawType
2
设置是腾讯风格还是360风格
0表示腾讯风格,1表示360风格
emTrackColor
3
Track及自动识别的边框的颜色
如:
RGB(255,0,0)
emEditBorderColor
4
文本输入框的边框颜色
如:
RGB(0,174,255)
emTransparent
5
工具栏的透明度
默认为220
emWindowAware
6
设置是否禁用随着DPI放大,flagvalue传递任意值均可
浏览器中建议不要调用
emDetectSubWindowRect
7
是否自动检测子窗口,暂时无用
未使用
emSetSaveName
8
设置保存时的文件名称
如:
constchar*szName="测试名";
InitParam(emSetSaveName,(unsignedlong)szName);
注:
免费版本此接口无效,将会显示默认值
emSetMagnifierBkColor
9
用于设置放大镜的背景色
一般不建议设置,默认透明即可
emSetMagnifierLogoText
10
设置放大镜上的显示的LOGO文字
如:
constchar*szName="测试名";
InitParam(emSetMagnifierLogoText,(unsignedlong)szName);
注:
免费版本此接口无效,将会显示默认值
emSetPreCaptureWindowTitle
11
设置网页上截图时弹出窗口的标题
如:
constchar*szName="测试名";
InitParam(emSetPreCaptureWindowTitle,(unsignedlong)szName);
注:
免费版本此接口无效,将会显示默认值
emSetPreCaptureWindowTransparent
18
设置预截图窗口的透明度
InitParam(emSetPreCaptureWindowTransparent,220);
以下是水印设置功能,如果不需要则无需关注
emSetWatermarkPictureType
20
用于设置水印图片的绘制方式
此参数设置具有默认值,仅在授权版本中才可修改设置,具体见下面的水印图片说明
emSetWatermarkPicturePath
21
用于设置水印图片的BASE64的图片数据
注:
仅支持PNG格式的图片的Base64的字符串
emSetWatermarkTextType
22
用于设置水印文字绘制方式
此参数设置具有默认值,仅在授权版本中才可修改设置,具体见下面的水印文字设置说明
emSetWatermarkTextValue
23
用于设置水印文字
注:
此处传递的水印文字需要是经过BASE64编码的,调用接口:
InitParamByBase64
emSetMosaicType
24
指定马赛克的样式
1为矩形,2为随鼠标画线的方式
emSetTooltipText
25
设置工具栏图标的TOOLTIP及完成按钮的文字
此参数设置具有默认值,仅在授权版本中才可修改设置,具体见下面的工具栏按钮文字设置说明
a).水印图片设置参数说明:
此处的参数值是一个字符串,以|为分割符,如:
//nShowType|nMinWidth|nMinHeight|nMaxWidth|nMaxHeight|nShowOffset
未授权时,此参数对应的设置将采用默认值,不可修改;默认支持的图片大小为200*200,超过此大小的地方,将仅显示是在200*200范围内的图片。
各字段意义如下:
参数名
参数值说明
备注
nShowType
设置绘制类型
1表示在中间显示水印;
2表示在右下显示水印;
3表示复合类型[默认在中间添加水印,当满足宽与高大于maxwidth及maxheight时同时在个角显示水印]
默认类型为1
nMinWidth
设置图片绘制水印图片的最小尺寸
当图片尺寸宽或高小于设置时,则不会绘制水印
默认:
60*60
nMinHeight
nMaxWidth
当宽度与高度大于MAX设置时将会在个角显示水印
这两个选项仅在nShowType为3时有效
默认:
600*600
nMaxHeight
nShowOffset
控制在显示水印时的偏移[中间显示不生效],同时控制各角的偏移
例如:
如显示在左上角时,此偏移表示离左边及上边的偏移值
默认20
示例:
constchar*szWatermarkFlag="3|100|100|400|400|20";
b).水印文字的设置说明:
此处的参数值是一个字符串,以|为分割符,如:
//nShowType|nMinWidth|nMinHeight|nVerticalInterval|nOffset|nFontSize|nIsBold|nTextWidth|nTextHeight|colorText
//colorText的值为:
A,R,G,B
未授权时,此参数对应的设置将采用默认值,不可修改。
各字段意义如下:
参数名
参数值说明
备注
nShowType
设置绘制类型
1表示在中间显示水印文字;
2表示在右下显示水印文字;
3表示复合类型,在图中间从上至下循环添加45度倾斜的水印文字
默认类型为3
nMinWidth
设置图片绘制水印图片的最小尺寸
当图片尺寸宽或高小于设置时,则不会绘制水印
默认60,60
nMinHeight
nVerticalInterval
循环绘制倾斜水印文字的间隔高度
此选项仅在nShowType为3时有效
默认150
nOffset
控制在显示水印文字时的偏移[中间显示不生效]
在nShowType为2时有效,表示离右下角的偏移;
在nShowType为3时,表示顶部起始位置的偏移
默认20
nFontSize
水印文字的字号
默认20
nIsBold
水印文字是否加粗
默认否
nTextWidth
水印文字所占的宽度,当字所占宽度超过这个宽度时,将不会显示
建议在设置中测试好宽度再进行二次设置
默认150
nTextHeight
水印文字所占的高度
建议在设置中测试好宽度再进行二次设置
默认50
colorText
以逗号为分隔的ARGB色彩设置
如:
55,255,0,0表示透明度是55的红色
默认:
#66333333
示例:
constchar*szWaterTextFlag="3|60|60|150|20|20|0|200|50|80,55,55,55";
c).工具栏图标tooltip设置说明:
此处的参数值是一个字符串,以|为分割符,如:
//tipRectangle|tipCircle|tipArrow|tipBrush|tipGlitter|tipMosaic|tipText|tipUndo|tipSave|tipCancel|tipFinish|txtFinish
未授权时,此参数对应的设置将采用默认值,不可修改。
各字段意义如下:
参数名
参数值说明
备注
tipRectangle
设置矩形按钮的tooltip
默认为:
“矩形工具”
tipCircle
设置椭圆按钮的tooltip
默认为:
“椭圆工具”
tipArrow
设置箭头按钮的tooltip
默认为:
“箭头工具”
tipBrush
设置画刷按钮的tooltip
默认为:
“画刷工具”
tipGlitter
设置荧光笔按钮的tooltip
默认为:
“荧光笔工具”
tipMosaic
设置马赛克按钮的tooltip
默认为:
“马赛克工具”
tipText
设置文字按钮的tooltip
默认为:
“文字工具”
tipUndo
设置撤销按钮的tooltip
默认为:
“撤销”
tipSave
设置保存按钮的tooltip
默认为:
“保存”
tipCancel
设置取消按钮的tooltip
默认为:
“结束截图”
tipFinish
设置完成按钮的tooltip
默认为:
“完成截图”
txtFinish
设置完成按钮的显示文字
默认为:
“完成”
示例:
constwchar_t*szToolbarText
=L"Rectangle|Circle|Arrow|Brush|Glitter|Mosaic|Text|Undo|Save|Cancel|Finish|Finish";
3.启动截图接口
voidCapture(constchar*defaultName,inthideThisWindow,intnAutoCapture,intx,inty,intwidth,intheight);
此接口用于实际的截图调用,传递相关的截图控制参数,控制截图时的行为。
参数说明:
参数名
参数类型
参数说明
备注
defaultName
字符串
用于指定在截图完成时自动保存的文件名
如:
111.jpg
此处建议传递的后续名为jpg或png,方便在网页上上传到后台的数据传输
hideThisWindow
int
用于指定是否要隐藏当前浏览器窗口
值如下:
1表示截图时隐藏当前窗口;
0表示截图时不隐藏当前窗口
autoCapture
int
标识截图的方式
此参数共有五个值:
0:
表示普通截图
1:
表示截取指定区域,区域由x、y、width、height参数指定
2:
表示截取当前桌面
3:
表示截图时先弹出一个提示窗口
4:
从剪贴板中获取图片
x
int
指定截图的区域
这4个值在参数autoCapture的值为1时表示自动截取指定区域。
当autoCapture为3时
1).如果全0,则弹出预截图窗口后再选择区域
2).如果全是1,则弹出预截图窗口后,自动截取整个桌面
3).其他情况,弹出预截图窗口后,自动截取指定的区域
y
int
width
int
height
int
4.截图完成后向浏览器通知的事件
CaptureFinished(inttype,intx,inty,intwidth,intheight,constchar*szInfo,constchar*picdata,constchar*localsavepath);
此事件函数用于在截图完成后[仅指截图时点击完成或双击选中区域以完成截图;保存截图与取消不触发此事件],通知Javascript进行后续处理,Javascript需要事先在浏览器中监听此事件,在收到事件通知后,可以获取到截图的相关数据,进行后续的上传到服务器的处理。
参数说明:
参数名
参数类型
参数说明
备注
type
int
回调函数的通知类型
1,表示截图完成
2,表示取消截图
3,表示在截图过程中另存了截图
4,表示从剪贴板获取截图的事件通知
在收到此通知时,请根据不同的类型值来进行判断处理
x
int
完成截图后返回截图的区域坐标
y
int
width
int
height
int
szinfo
字符串
用于传输额外的参数
当type为3时,此值表示保存的路径
当type为4时,此值如果为0则表示获取成功,否则失败
picdata
字符串
以BASE64编码的字符串形式的图片数据
在Javascript中,可以对此数据进行Urlencode,然后通过Ajax发送给服务器存储。
localsavepath
字符串
本次截图保存在本机的路径
5.其他接口
GetVersion与GetLocation
这两个接口直接返回字符串,表示控件的版本号与控件在电脑上的路径。
目前仅支持IE或支持npapi的浏览器。
GetCursorPosition
返回当前相对于屏幕原点的鼠标坐标,此坐标用于协助希望固定截取浏览器中部分区域的坐标定位[浏览器区域与屏幕区域的映射转换需要用到]
目前仅支持IE或支持npapi的浏览器
返回值为以逗号分割的字符串,分别表示x坐标与y坐标
例:
alert(niuniuCapture().GetCursorPosition());
SavePicture
针对刚截取的图片,通过另存为窗口先把路径后保存[这个接口适用于那些希望将图片另存到本地电脑的需求]
目前仅支持IE或支持npapi的浏览器。
返回值为整型,分别表示:
0:
失败
1:
成功
2:
取消保存
3:
没有截图,无需保存
例:
varret=niuniuCapture().SavePicture('');
其中传递的参数表示要保存的默认文件名,可传空。
注:
以下的截图控件的示例代码主要是用于演示如何通过JS调用控件,但调用的核心部分已经全部封装到了niuniucapture.js中,一般情况下,你不需要修改只文件内容,只需要引用,并且自己另外写JS来与UI集成即可,具体见网站中的示例代码(capturewrapper.js)。
6.调用示例
牛牛截图的Web调用演示请访问地址:
牛牛截图控件的核心调用代码已经封装到niuniucapture.js中,并且在内部处理好了各种不同浏览器的调用。
以下对演示代码中的部分进行简要说明;在网页中,引用niuniucapture.js后,通过如下代码来使用控件:
/*
用于初始化牛牛截图控件,此函数需要在页面加载完成后立即调用
在此函数中,您可以设置相关的截图的UI控制,如,画笔大小、边框颜色等等【这部分信息在niuniucapture.js中也有默认值,直接修改默认值也可】
*/
functionInit()
{
captureObj=newNiuniuCaptureObject();
captureObj.NiuniuAuthKey="niuniu";
//此处可以设置相关参数
captureObj.TrackColor=rgb2value(255,0,0);
captureObj.EditBorderColor=rgb2value(0,0,255);
//设置控件加载完成以及截图完成的回调函数
captureObj.FinishedCallback=OnCaptureFinishedCallback;
captureObj.PluginLoadedCallback=PluginLoadedCallback;
//初始化控件
captureObj.InitNiuniuCapture();
}
然后就是响应控件加载完成的回调以及截图完成的回调:
/*
当控件成功加载后回调的的函数,您可以在此控制相应的UI显示
*/
functionPluginLoadedCallback(success)
{
if(success)
{
$('#imgshow').hide();
$('#imgshow').attr('src',"./image/loading.gif?
v=1");
$('#btnReload').hide();
$('#btnCapture').show();
}
}
在完成事件后,可以通过Ajax将图片数据上传到服务器[如果是取消排队等,需要做其他相应处理]:
vardata="userid=test111&picdata="+encodeURIComponent(picdata);
//切记此处不可跨域来上传图片,因为跨域的话,无法以POST方式提交,只能上传非常小的图片数据,如果图片大一点就不行了
$.ajax({
type:
"POST",
url:
"./upload.ashx",
dataType:
"jsonp",
jsonp:
"callback",
data:
data,
success:
function(obj){
if(obj.code==0)
{
$('#show').html('上传成功,图片地址:
'+obj.info);
$('#imgshow').show();
$('#imgshow').attr('src',obj.info);
}
else
{
$('#show').html('上传失败:
'+obj.info);
}
},
error:
function(){$('#show').html('由于网络原因,上传失败。
');}
});
此处后台语言可以是任何的一种Web开发语言,只要能正常的接受HTTPPOST请求,并且将参数中的picdata进行Base64Decode得到真正的图片数据数组,然后再存储到磁盘上即可,以下提供一种在C#中的服务端实现:
publicclassUpload:
IHttpHandler
{
publicvoidProcessRequest(HttpContextcontext)
{
context.Response.ContentType="text/plain";
stringcallback=context.Request["callback"];
stringstrValue=SavePictureAndReturn(context);
stringstrRet=callback+"("+strValue+")";
context.Response.Write(strRet);
}
privatestringSavePictureAndReturn(HttpContextcontext)
{
stringdata=context.Request["picdata"];
byte[]byteData=null;
byteData=Convert.FromBase64String(data);
stringimageName="picsave.jpg";
File.WriteAllBytes(System.AppDomain.CurrentDomain.BaseDirectory+imageName,byteData);
//{"code":
0,"info":
"URL"}
intretCode=0;
stringstrInfo=context.Request.Url.ToString().ToLower();
strInfo=strInfo.Substring(0,strInfo.IndexOf("upload.ashx"));
strInfo+=imageName+"?
ttt="+DateTime.Now.ToFileTime();
return"{"+string.Format("\"code\":
{0},\"info\":
\"{1}\"",retCode,strInfo)+"}";
}
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 截图 控件 浏览器 调用 说明