牛牛截图控件浏览器版调用说明.docx

1、牛牛截图控件浏览器版调用说明牛牛截图控件浏览器版调用说明本说明文档旨在对截图控件的浏览器控件进行说明，指导调用者顺利的将截图控件集成进第三方网页中，使第三方网页也能拥有完美的牛牛截图功能。牛牛截图网页演示页面请访问： 写在前面的话：牛牛截图控件目前支持的功能比较丰富，接口比较丰富，但能保证基本功能的接口并不复杂，在查看文档时，请自行根据自己的需求查看相应的接口；添加水印、获取剪贴板中的图片属于高级功能，如果不需要，这部分可以忽略。提醒：牛牛截图的核心的调用代码已经全部封装在了niuniucapture.js中，一般情况下，你不需要修改只文件内容，只需要引用，并且自己另外写JS来与UI集成即可，

2、具体见示例(capturewrapper.js)。牛牛截图控件浏览器版能在目前所有的主流浏览器上正常工作，以下的接口说明适用于所有浏览器，并且提供相应的Javascript调用示例。控件主要有三个接口：InitCapture，InitParam以及Capture，这些接口均是暴露给浏览器的Javascript调用,具体可以参考调用WebNiuniuCapturedemo_source.zip，接口的具体描述如下：1. 接口初始化接口intInitCapture(constchar* szAuth);此接口函数用于初始化截图控件的授权信息，默认的授权码为：niuniu。参数说明：参数名参数类型参

3、数说明备注szAuth字符串接口调用的授权码默认的授权码为：niuniu2. 参数初始化接口intInitParam(int flag, unsignedlong flagvalue);此接口函数用于初始化截图各个状态下的界面的显示效果，如果不调用，则以默认值处理。参数说明：参数名参数类型参数说明备注flagint要设置的参数项此处对应的枚举ExtendFlagTypeEnum的整形值 flagvalueunsignedlong设置的参数值根据不同的枚举来设置不同的值 枚举定义如下:typedefenum ExtendFlagTypeEnum emPensize = 1, / emDrawTy

4、pe, / emTrackColor, / emEditBorderColor, / emTransparent,/ emWindowAware, emDetectSubWindowRect,emSetSaveName,emSetMagnifierBkColor, /设置放大镜的背景色，不设置则透明 emSetMagnifierLogoText, /设置放大镜上的LOGO字符，可提示快捷键，如：牛牛截图(CTRL + SHIFT + A)emSetPreCaptureWindowTitle, /设置网页上截图时弹出窗口的标题emSetPreCaptureWindowTransparent=18

5、,/设置预截图窗口的透明度emSetWatermarkPictureType=20, /设置水印的类型emSetWatermarkPicturePath, /设置水印的路径emSetWatermarkTextType, /设置水印文字的类型emSetWatermarkTextValue, /设置水印文字emSetMosaicType,/设置马赛克的样式emSetTooltipText, /设置工具栏图标的TOOLTIP及完成按钮的文字;枚举项的说明如下：枚举参数名枚举对应数值参数值说明备注emPensize1设置画笔大小如不设置，默认为2emDrawType2设置是腾讯风格还是360风格0表示

6、腾讯风格，1表示360风格emTrackColor3Track及自动识别的边框的颜色如：RGB(255, 0, 0)emEditBorderColor4文本输入框的边框颜色如：RGB(0, 174, 255)emTransparent5工具栏的透明度默认为220emWindowAware6设置是否禁用随着DPI放大，flagvalue传递任意值均可浏览器中建议不要调用emDetectSubWindowRect7是否自动检测子窗口，暂时无用未使用emSetSaveName8设置保存时的文件名称如：const char* szName = 测试名;InitParam(emSetSaveName,

7、(unsigned long) szName);注：免费版本此接口无效，将会显示默认值emSetMagnifierBkColor9用于设置放大镜的背景色一般不建议设置，默认透明即可emSetMagnifierLogoText10设置放大镜上的显示的LOGO文字 如：const char* szName = 测试名;InitParam(emSetMagnifierLogoText, (unsigned long) szName);注：免费版本此接口无效，将会显示默认值 emSetPreCaptureWindowTitle11设置网页上截图时弹出窗口的标题如：const char* szName

8、= 测试名;InitParam(emSetPreCaptureWindowTitle, (unsigned long) szName);注：免费版本此接口无效，将会显示默认值emSetPreCaptureWindowTransparent18设置预截图窗口的透明度InitParam(emSetPreCaptureWindowTransparent, 220);以下是水印设置功能，如果不需要则无需关注 emSetWatermarkPictureType20用于设置水印图片的绘制方式此参数设置具有默认值，仅在授权版本中才可修改设置，具体见下面的水印图片说明emSetWatermarkPicture

9、Path21用于设置水印图片的BASE64的图片数据注：仅支持PNG格式的图片的Base64的字符串emSetWatermarkTextType22用于设置水印文字绘制方式此参数设置具有默认值，仅在授权版本中才可修改设置，具体见下面的水印文字设置说明emSetWatermarkTextValue23用于设置水印文字注：此处传递的水印文字需要是经过BASE64编码的，调用接口：InitParamByBase64emSetMosaicType24指定马赛克的样式1为矩形，2为随鼠标画线的方式emSetTooltipText25设置工具栏图标的TOOLTIP及完成按钮的文字此参数设置具有默认值，仅在

10、授权版本中才可修改设置，具体见下面的工具栏按钮文字设置说明a). 水印图片设置参数说明：此处的参数值是一个字符串，以|为分割符，如：/nShowType|nMinWidth|nMinHeight|nMaxWidth|nMaxHeight|nShowOffset未授权时，此参数对应的设置将采用默认值，不可修改；默认支持的图片大小为200*200，超过此大小的地方，将仅显示是在200*200范围内的图片。各字段意义如下：参数名参数值说明备注nShowType设置绘制类型1表示在中间显示水印；2表示在右下显示水印；3表示复合类型默认在中间添加水印，当满足宽与高大于maxwidth及maxheight

11、时同时在个角显示水印默认类型为1nMinWidth设置图片绘制水印图片的最小尺寸当图片尺寸宽或高小于设置时，则不会绘制水印默认：60*60nMinHeightnMaxWidth当宽度与高度大于MAX设置时将会在个角显示水印这两个选项仅在nShowType为3时有效默认：600*600nMaxHeightnShowOffset控制在显示水印时的偏移中间显示不生效，同时控制各角的偏移例如：如显示在左上角时，此偏移表示离左边及上边的偏移值默认20示例：constchar* szWatermarkFlag = 3|100|100|400|400|20;b).水印文字的设置说明：此处的参数值是一个字符串

12、，以|为分割符，如：/nShowType|nMinWidth|nMinHeight|nVerticalInterval|nOffset|nFontSize|nIsBold|nTextWidth|nTextHeight|colorText/colorText的值为：A,R,G,B未授权时，此参数对应的设置将采用默认值，不可修改。各字段意义如下：参数名参数值说明备注nShowType设置绘制类型1表示在中间显示水印文字；2表示在右下显示水印文字；3表示复合类型，在图中间从上至下循环添加45度倾斜的水印文字默认类型为3nMinWidth设置图片绘制水印图片的最小尺寸当图片尺寸宽或高小于设置时，则不会

13、绘制水印默认60,60nMinHeightnVerticalInterval循环绘制倾斜水印文字的间隔高度此选项仅在nShowType为3时有效默认150nOffset控制在显示水印文字时的偏移中间显示不生效在nShowType为2时有效，表示离右下角的偏移；在nShowType为3时，表示顶部起始位置的偏移默认20nFontSize水印文字的字号默认20nIsBold水印文字是否加粗默认否nTextWidth水印文字所占的宽度，当字所占宽度超过这个宽度时，将不会显示 建议在设置中测试好宽度再进行二次设置默认150nTextHeight水印文字所占的高度建议在设置中测试好宽度再进行二次设置默认

14、50colorText以逗号为分隔的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未授权时，此参数对应

15、的设置将采用默认值，不可修改。各字段意义如下：参数名参数值说明备注tipRectangle设置矩形按钮的tooltip默认为：“矩形工具”tipCircle设置椭圆按钮的tooltip默认为：“椭圆工具”tipArrow设置箭头按钮的tooltip默认为：“箭头工具”tipBrush设置画刷按钮的tooltip默认为：“画刷工具”tipGlitter设置荧光笔按钮的tooltip默认为：“荧光笔工具”tipMosaic设置马赛克按钮的tooltip默认为：“马赛克工具”tipText设置文字按钮的tooltip默认为：“文字工具”tipUndo设置撤销按钮的tooltip默认为：“撤销”tip

16、Save设置保存按钮的tooltip默认为：“保存”tipCancel设置取消按钮的tooltip默认为：“结束截图”tipFinish设置完成按钮的tooltip默认为：“完成截图”txtFinish设置完成按钮的显示文字 默认为：“完成”示例：constwchar_t* szToolbarText= LRectangle|Circle|Arrow|Brush|Glitter|Mosaic|Text|Undo|Save|Cancel|Finish|Finish;3. 启动截图接口voidCapture(constchar*defaultName, inthideThisWindow, int

17、nAutoCapture, intx, inty, intwidth, intheight);此接口用于实际的截图调用，传递相关的截图控制参数，控制截图时的行为。参数说明：参数名参数类型参数说明备注defaultName字符串用于指定在截图完成时自动保存的文件名如：111.jpg此处建议传递的后续名为jpg或png，方便在网页上上传到后台的数据传输hideThisWindowint用于指定是否要隐藏当前浏览器窗口 值如下：1表示截图时隐藏当前窗口；0表示截图时不隐藏当前窗口 autoCaptureint标识截图的方式此参数共有五个值：0：表示普通截图1：表示截取指定区域，区域由x、y、widt

18、h、height参数指定2：表示截取当前桌面3: 表示截图时先弹出一个提示窗口4: 从剪贴板中获取图片xint指定截图的区域这4个值在参数autoCapture的值为1时表示自动截取指定区域。当autoCapture为3时1). 如果全0，则弹出预截图窗口后再选择区域2). 如果全是1，则弹出预截图窗口后，自动截取整个桌面3). 其他情况，弹出预截图窗口后，自动截取指定的区域yintwidthintheightint4. 截图完成后向浏览器通知的事件CaptureFinished(int type, int x, int y, int width, int height, const char

19、* szInfo, constchar * picdata, constchar * localsavepath);此事件函数用于在截图完成后 仅指截图时点击完成或双击选中区域以完成截图；保存截图与取消不触发此事件，通知Javascript进行后续处理，Javascript需要事先在浏览器中监听此事件，在收到事件通知后，可以获取到截图的相关数据，进行后续的上传到服务器的处理。参数说明：参数名参数类型参数说明备注typeint回调函数的通知类型1,表示截图完成2,表示取消截图3,表示在截图过程中另存了截图4,表示从剪贴板获取截图的事件通知在收到此通知时，请根据不同的类型值来进行判断处理xint完

20、成截图后返回截图的区域坐标yintwidthintheightintszinfo字符串用于传输额外的参数当type为3时，此值表示保存的路径当type为4时，此值如果为0则表示获取成功，否则失败picdata字符串以BASE64编码的字符串形式的图片数据 在Javascript中，可以对此数据进行Urlencode，然后通过Ajax发送给服务器存储。localsavepath字符串本次截图保存在本机的路径 5. 其他接口GetVersion与GetLocation这两个接口直接返回字符串，表示控件的版本号与控件在电脑上的路径。目前仅支持IE或支持npapi的浏览器。GetCursorPosit

21、ion返回当前相对于屏幕原点的鼠标坐标，此坐标用于协助希望固定截取浏览器中部分区域的坐标定位浏览器区域与屏幕区域的映射转换需要用到目前仅支持IE或支持npapi的浏览器返回值为以逗号分割的字符串，分别表示x坐标与y坐标例：alert(niuniuCapture().GetCursorPosition();SavePicture针对刚截取的图片，通过另存为窗口先把路径后保存这个接口适用于那些希望将图片另存到本地电脑的需求目前仅支持IE或支持npapi的浏览器。返回值为整型，分别表示：0：失败1：成功2：取消保存3：没有截图，无需保存例：var ret = niuniuCapture().Save

22、Picture();其中传递的参数表示要保存的默认文件名，可传空。注：以下的截图控件的示例代码主要是用于演示如何通过JS调用控件，但调用的核心部分已经全部封装到了niuniucapture.js中，一般情况下，你不需要修改只文件内容，只需要引用，并且自己另外写JS来与UI集成即可，具体见网站中的示例代码(capturewrapper.js)。6. 调用示例牛牛截图的Web调用演示请访问地址： 牛牛截图控件的核心调用代码已经封装到niuniucapture.js中，并且在内部处理好了各种不同浏览器的调用。以下对演示代码中的部分进行简要说明；在网页中，引用niuniucapture.js后，通过如

23、下代码来使用控件：/*用于初始化牛牛截图控件，此函数需要在页面加载完成后立即调用 在此函数中，您可以设置相关的截图的UI控制，如，画笔大小、边框颜色等等 【这部分信息在niuniucapture.js中也有默认值，直接修改默认值也可 】*/function Init() captureObj = new NiuniuCaptureObject(); captureObj.NiuniuAuthKey = niuniu; /此处可以设置相关参数 captureObj.TrackColor = rgb2value(255, 0, 0); captureObj.EditBorderColor = rg

24、b2value(0, 0, 255); /设置控件加载完成以及截图完成的回调函数 captureObj.FinishedCallback = OnCaptureFinishedCallback; captureObj.PluginLoadedCallback = PluginLoadedCallback; /初始化控件 captureObj.InitNiuniuCapture();然后就是响应控件加载完成的回调以及截图完成的回调：/*当控件成功加载后回调的的函数，您可以在此控制相应的UI显示 */function PluginLoadedCallback(success) if(success

25、) $(#imgshow).hide(); $(#imgshow).attr(src, ./image/loading.gif?v=1); $(#btnReload).hide(); $(#btnCapture).show(); 在完成事件后，可以通过Ajax将图片数据上传到服务器如果是取消排队等，需要做其他相应处理：vardata = userid=test111&picdata= + encodeURIComponent(picdata); /切记此处不可跨域来上传图片，因为跨域的话，无法以POST方式提交，只能上传非常小的图片数据，如果图片大一点就不行了 $.ajax(type: POS

26、T,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开

27、发语言，只要能正常的接受HTTP POST请求，并且将参数中的picdata进行Base64Decode得到真正的图片数据数组，然后再存储到磁盘上即可，以下提供一种在C#中的服务端实现：publicclassUpload : IHttpHandler publicvoidProcessRequest(HttpContextcontext) context.Response.ContentType = text/plain;stringcallback = context.Requestcallback;stringstrValue = SavePictureAndReturn(context)

28、;stringstrRet = callback + ( + strValue + );context.Response.Write(strRet); privatestringSavePictureAndReturn(HttpContextcontext) stringdata = context.Requestpicdata;byte byteData = null;byteData = Convert.FromBase64String(data);stringimageName = picsave.jpg;File.WriteAllBytes(System.AppDomain.Curre

29、ntDomain.BaseDirectory + imageName, byteData);/code:0,info:URLintretCode = 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) + ;