牛牛截图控件.docx
《牛牛截图控件.docx》由会员分享，可在线阅读，更多相关《牛牛截图控件.docx（18页珍藏版）》请在冰点文库上搜索。
牛牛截图控件
牛牛截图控件浏览器版调用说明
牛牛截图控件浏览器版调用说明1
1.接口初始化接口2
2.参数初始化接口2
3.启动截图接口7
4.截图完成后向浏览器通知的事件8
5.其他接口9
6.调用示例10
本说明文档旨在对截图控件的浏览器控件进行说明，指导调用者顺利的将截图控件集成进第三方网页中，使第三方网页也能拥有完美的牛牛截图功能。
牛牛截图网页演示页面请访问：
写在前面的话：
牛牛截图控件目前支持的功能比较丰富，接口比较丰富，但能保证基本功能的接口并不复杂，在查看文档时，请自行根据自己的需求查看相应的接口；添加水印、获取剪贴板中的图片属于高级功能，如果不需要，这部分可以忽略。
提醒：
牛牛截图的核心的调用代码已经全部封装在了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.ToStr
升级会员 