牛牛截图控件浏览器版调用说明编程频道|福州电脑网

2024年2月6日发(作者：)

个人资料整理，仅供个人学习使用

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

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

1.接口初始化接口2

2.参数初始化接口2

3.启动截图接口7

4.截图完成后向浏览器通知的事件8

5.其他接口9

6.调用示例10

本说明文档旨在对截图控件的浏览器控件进行说明，指导调用者顺利的将截图控件集成进第三方网页中，使第三方网页也能拥有完美的牛牛截图功能。

牛牛截图网页演示页面请访问：/

写在前面的话：牛牛截图控件目前支持的功能比较丰富，接口比较丰富，但能保证基本功能的接口并不复杂，在查看文档时，请自行根据自己的需求查看相应的接口；添加水印、获取剪贴板中的图片属于高级功能，如果不需要，这部分可以忽略。

提醒：牛牛截图的核心的调用代码已经全部封装在了中，一般情况下，你不需要修改只文件内容，只需要引用，并且自己另外写JS来与UI集成即可，具体见示例()。

牛牛截图控件浏览器版能在目前所有的主流浏览器上正常工作，以下的接口说明适用于所有浏览器，并且提供相应的Javascript调用示例。控件主要有三个接口：InitCapture，InitParam以及Capture，这些接口均是暴露给浏览器的Javascript调用,具体可以参考调用WebNiuniuCapturedemo_，接口的具体描述如下：

1 / 12

个人资料整理，仅供个人学习使用

1. 接口初始化接口

intInitCapture(constchar* szAuth);

此接口函数用于初始化截图控件的授权信息，默认的授权码为："niuniu"。

参数说明：

参数名

szAuth

参数类型

字符串

参数说明

接口调用的授权码

备注

默认的授权码为："niuniu"

2. 参数初始化接口

intInitParam(int flag, unsignedlong flagvalue);

此接口函数用于初始化截图各个状态下的界面的显示效果，如果不调用，则以默认值处理。

参数说明：

参数名

flag

参数类型

int

参数说明

要设置的参数项

设置的参数值

备注

此处对应的枚举ExtendFlagTypeEnum的整形值

根据不同的枚举来设置不同的值 flagvalue unsignedlong

枚举定义如下:

typedefenum ExtendFlagTypeEnum

{

emPensize = 1, //

emDrawType, //

emTrackColor, //

emEditBorderColor, //

emTransparent,//

emWindowAware,

emDetectSubWindowRect,

emSetSaveName,

emSetMagnifierBkColor, //设置放大镜的背景色，不设置则透明

emSetMagnifierLogoText, //设置放大镜上的LOGO字符，可提示快捷键，如：牛牛截图(CTRL + SHIFT + A)

emSetPreCaptureWindowTitle, //设置网页上截图时弹出窗口的标题

emSetPreCaptureWindowTransparent=18,//设置预截图窗口的透明度

emSetWatermarkPictureType=20, //设置水印的类型

emSetWatermarkPicturePath, //设置水印的路径

emSetWatermarkTextType, //设置水印文字的类型

emSetWatermarkTextValue, //设置水印文字

2 / 12

个人资料整理，仅供个人学习使用

emSetMosaicType,//设置马赛克的样式

emSetTooltipText,

的文字

};

枚举项的说明如下：

枚举参数名

emPensize

emDrawType

emTrackColor

emEditBorderColor

emTransparent

emWindowAware

枚举对应数值

//设置工具栏图标的TOOLTIP及完成按钮参数值说明

设置画笔大小

设置是腾讯风格还是360风格

Track及自动识别的边框的颜色

文本输入框的边框颜色

工具栏的透明度

设置是否禁用随着DPI放大，flagvalue传递任意值均可

备注

如不设置，默认为2

0表示腾讯风格，1表示360风格

如：RGB(255, 0, 0)

如：RGB(0, 174, 255)

默认为220

浏览器中建议不要调用

未使用

如：

const char* szName =

"测试名";

InitParam(emSetSaveName, (unsigned

long) szName);

注：免费版本此接口无效，将会显示默认值

一般不建议设置，默认透明即可

如：

const char* szName =

"测试名";

InitParam(emSetMagnifierLogoText,

(unsigned long)

szName);

注：免费版本此接口无效，将会显示默认值

emDetectSubWindowRect

emSetSaveName

是否自动检测子窗口，暂时无用

设置保存时的文件名称

emSetMagnifierBkColor

emSetMagnifierLogoText

用于设置放大镜的背景色

设置放大镜上的显示的LOGO文字

3 / 12

个人资料整理，仅供个人学习使用

emSetPreCaptureWindowTitle

11 设置网页上截图时弹出窗口的标题

如：

const char* szName =

"测试名";

InitParam(emSetPreCaptureWindowTitle, (unsigned long)

szName);

注：免费版本此接口无效，将会显示默认值

InitParam(emSetPreCaptureWindowTransparent, 220);

此参数设置具有默认值，仅在授权版本中才可修改设置，具体见下面的水印图片说明

注：仅支持PNG格式的图片的Base64的字符串

emSetPreCaptureWindowTransparent

18 设置预截图窗口的透明度

以下是水印设置功能，如果不需要则无需关注

emSetWatermarkPictureType

20 用于设置水印图片的绘制方式

emSetWatermarkPicturePath

emSetWatermarkTextType

21 用于设置水印图片的BASE64的图片数据

22 用于设置水印文字绘制方式此参数设置具有默认值，仅在授权版本中才可修改设置，具体见下面的水印文字设置说明

用于设置水印文字注：此处传递的水印文字需要是经过BASE64编码的，调用接口：

InitParamByBase64

1为矩形，2为随鼠标画线的方式

此参数设置具有默认值，仅在授权版本中才可修改设置，具体见下面的工具栏按钮文字设置说明

emSetWatermarkTextValue

emSetMosaicType

emSetTooltipText

指定马赛克的样式

设置工具栏图标的TOOLTIP及完成按钮的文字

a). 水印图片设置参数说明：

此处的参数值是一个字符串，以|为分割符，如：

4 / 12

个人资料整理，仅供个人学习使用

未授权时，此参数对应的设置将采用默认值，不可修改；默认支持的图片大小为200*200，超过此大小的地方，将仅显示是在200*200范围内的图片。

各字段意义如下：

参数名

nShowType

参数值说明

设置绘制类型

备注

1表示在中间显示水印；

2表示在右下显示水印；

3表示复合类型[默认在中间添加水印，当满足宽与高大于maxwidth及maxheight时同时在个角显示水印]

默认类型为1

当图片尺寸宽或高小于设置时，则不会绘制水印

默认：60*60

这两个选项仅在nShowType为3时有效

默认：600*600

例如：如显示在左上角时，此偏移表示离左边及上边的偏移值

默认20

nMinWidth

nMinHeight

设置图片绘制水印图片的最小尺寸

nMaxWidth

nMaxHeight

nShowOffset

当宽度与高度大于MAX设置时将会在个角显示水印

控制在显示水印时的偏移[中间显示不生效]，同时控制各角的偏移

示例：

constchar* szWatermarkFlag = "3|100|100|400|400|20";

b).水印文字的设置说明：

此处的参数值是一个字符串，以|为分割符，如：

//colorText的值为：A,R,G,B

未授权时，此参数对应的设置将采用默认值，不可修改。

各字段意义如下：

参数名

nShowType

参数值说明

设置绘制类型

备注

1表示在中间显示水印文字；

2表示在右下显示水印文字；

3表示复合类型，在图中间从上至下循环添加45度倾斜的水印文字

默认类型为3

当图片尺寸宽或高小于设置时，则不会绘制水nMinWidth

nMinHeight

设置图片绘制水印图片的最小尺寸

5 / 12

个人资料整理，仅供个人学习使用

印

默认60,60

nVerticalInterval 循环绘制倾斜水印文字的间隔高度此选项仅在nShowType为3时有效

默认150

在nShowType为2时有效，表示离右下角的偏移；

在nShowType为3时，表示顶部起始位置的偏移

默认20

默认否

建议在设置中测试好宽度再进行二次设置

默认150

建议在设置中测试好宽度再进行二次设置

默认50

如：55,255,0,0 表示透明度是55的红色

默认：#66333333

nOffset 控制在显示水印文字时的偏移[中间显示不生效]

nFontSize

nIsBold

nTextWidth

水印文字的字号

水印文字是否加粗

水印文字所占的宽度，当字所占宽度超过这个宽度时，将不会显示

水印文字所占的高度 nTextHeight

colorText 以逗号为分隔的ARGB色彩设置

示例：

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

参数值说明

设置矩形按钮的tooltip

设置椭圆按钮的tooltip

设置箭头按钮的tooltip

设置画刷按钮的tooltip

设置荧光笔按钮的tooltip

设置马赛克按钮的tooltip

设置文字按钮的tooltip

设置撤销按钮的tooltip

设置保存按钮的tooltip

设置取消按钮的tooltip

6 / 12

备注

默认为：“矩形工具”

默认为：“椭圆工具”

默认为：“箭头工具”

默认为：“画刷工具”

默认为：“荧光笔工具”

默认为：“马赛克工具”

默认为：“文字工具”

默认为：“撤销”

默认为：“保存”

默认为：“结束截图”

个人资料整理，仅供个人学习使用

tipFinish

txtFinish

设置完成按钮的tooltip

设置完成按钮的显示文字

默认为：“完成截图”

默认为：“完成”

示例：

constwchar_t* szToolbarText

3. 启动截图接口

voidCapture(constchar*defaultName, inthideThisWindow, intnAutoCapture, intx, inty, intwidth,

intheight);

此接口用于实际的截图调用，传递相关的截图控制参数，控制截图时的行为。

参数说明：

参数名

defaultName

参数类型

字符串

参数说明备注

用于指定在截图完成如：

时自动保存的文件名

此处建议传递的后续名为jpg或png，方便在网页上上传到后台的数据传输

用于指定是否要隐藏当前浏览器窗口

值如下：

1表示截图时隐藏当前窗口；

0表示截图时不隐藏当前窗口

此参数共有五个值：

0：表示普通截图

1：表示截取指定区域，区域由x、y、width、height参数指定

2：表示截取当前桌面

3: 表示截图时先弹出一个提示窗口

4: 从剪贴板中获取图片

这4个值在参数autoCapture的值为1hideThisWindow

int

autoCapture int 标识截图的方式

int

指定截图的区域

7 / 12

个人资料整理，仅供个人学习使用

width

height

int

时表示自动截取指定区域。

当autoCapture为3时

1). 如果全0，则弹出预截图窗口后再选择区域

2). 如果全是1，则弹出预截图窗口后，自动截取整个桌面

3). 其他情况，弹出预截图窗口后，自动截取指定的区域

4. 截图完成后向浏览器通知的事件

CaptureFinished(int type, int x, int y, int width, int height, const char* szInfo, constchar * picdata,

constchar * localsavepath);

此事件函数用于在截图完成后 [仅指截图时点击完成或双击选中区域以完成截图；保存截图与取消不触发此事件]，通知Javascript进行后续处理，Javascript需要事先在浏览器中监听此事件，在收到事件通知后，可以获取到截图的相关数据，进行后续的上传到服务器的处理。

参数说明：

参数名

type

参数类型

int

参数说明备注

回调函数的通知类型 1,表示截图完成

2,表示取消截图

3,表示在截图过程中另存了截图

4,表示从剪贴板获取截图的事件通知

在收到此通知时，请根据不同的类型值来进行判断处理

完成截图后返回截图的区域坐标

width

height

int

8 / 12

个人资料整理，仅供个人学习使用

szinfo 字符串用于传输额外的参数当type为3时，此值表示保存的路径

当type为4时，此值如果为0则表示获取成功，否则失败

以BASE64编码的字在Javascript中，可符串形式的图片数据以对此数据进行Urlencode，然后通过Ajax发送给服务器存储。

本次截图保存在本机的路径

picdata 字符串

localsavepath

字符串

5. 其他接口

GetVersion与GetLocation

这两个接口直接返回字符串，表示控件的版本号与控件在电脑上的路径。

目前仅支持IE或支持npapi的浏览器。

GetCursorPosition

返回当前相对于屏幕原点的鼠标坐标，此坐标用于协助希望固定截取浏览器中部分区域的坐标定位[浏览器区域与屏幕区域的映射转换需要用到]

目前仅支持IE或支持npapi的浏览器

返回值为以逗号分割的字符串，分别表示x坐标与y坐标

例：alert(niuniuCapture().GetCursorPosition());

SavePicture

针对刚截取的图片，通过另存为窗口先把路径后保存[这个接口适用于那些希望将图片另存到本地电脑的需求]

目前仅支持IE或支持npapi的浏览器。

返回值为整型，分别表示：

0：失败

1：成功

2：取消保存

3：没有截图，无需保存

例：var ret = niuniuCapture().SavePicture('');

其中传递的参数表示要保存的默认文件名，可传空。

9 / 12

个人资料整理，仅供个人学习使用

注：以下的截图控件的示例代码主要是用于演示如何通过JS调用控件，但调用的核心部分已经全部封装到了中，一般情况下，你不需要修改只文件内容，只需要引用，并且自己另外写JS来与UI集成即可，具体见网站中的示例代码()。

6. 调用示例

牛牛截图的Web调用演示请访问地址： /

牛牛截图控件的核心调用代码已经封装到中，并且在内部处理好了各种不同浏览器的调用。

以下对演示代码中的部分进行简要说明；在网页中，引用后，通过如下代码来使用控件：

用于初始化牛牛截图控件，此函数需要在页面加载完成后立即调用

在此函数中，您可以设置相关的截图的UI控制，如，画笔大小、边框颜色等等【这部分信息在中也有默认值，直接修改默认值也可】

function Init()

{

captureObj = new NiuniuCaptureObject();

AuthKey = "niuniu";

//此处可以设置相关参数

olor = rgb2value(255, 0, 0);

rderColor = rgb2value(0, 0, 255);

//设置控件加载完成以及截图完成的回调函数

edCallback = OnCaptureFinishedCallback;

LoadedCallback = PluginLoadedCallback;

//初始化控件

uniuCapture();

}

然后就是响应控件加载完成的回调以及截图完成的回调：

当控件成功加载后回调的的函数，您可以在此控制相应的UI显示

function PluginLoadedCallback(success)

{

if(success)

{

$('#imgshow').hide();

10 / 12

个人资料整理，仅供个人学习使用

$('#imgshow').attr('src', "./image/?v=1");

$('#btnReload').hide();

$('#btnCapture').show();

}

在完成事件后，可以通过Ajax将图片数据上传到服务器[如果是取消排队等，需要做其他相应处理]：

vardata = "userid=test111&picdata=" + encodeURIComponent(picdata);

果图片大一点就不行了

$.ajax({

type: "POST",

url: "./",

dataType: "jsonp",

jsonp: "callback",

data: data,

success: function (obj) {

if(==0)

{

$('#show').html('上传成功，图片地址：' + );

$('#imgshow').show();

$('#imgshow').attr('src', );

}

{

}

else

$('#show').html('上传失败 :' + );

error : function(){$('#show').html('由于网络原因，上传失败。'); }

});

//切记此处不可跨域来上传图片，因为跨域的话，无法以POST方式提交，只能上传非常小的图片数据，如

此处后台语言可以是任何的一种Web开发语言，只要能正常的接受HTTP POST请求，并且将参数中的picdata进行Base64Decode得到真正的图片数据数组，然后再存储到磁盘上即可，以下提供一种在C#中的服务端实现：

publicclassUpload : IHttpHandler

{

publicvoidProcessRequest(HttpContextcontext)

{

tType = "text/plain";

stringcallback = t["callback"];

stringstrValue = SavePictureAndReturn(context);

stringstrRet = callback + "(" + strValue + ")";

11 / 12

个人资料整理，仅供个人学习使用

(strRet);

}

privatestringSavePictureAndReturn(HttpContextcontext)

{

stringdata = t["picdata"];

byte[] byteData = null;

byteData = se64String(data);

stringimageName = "";

llBytes(rectory + imageName, byteData);

//{"code":0,"info":"URL"}

intretCode = 0;

stringstrInfo = ng().ToLower();

strInfo = ing(0, f(""));

strInfo += imageName + "?ttt=" + Time();

return"{" + (""code":{0},"info":"{1}"", retCode, strInfo) + "}";

}

publicboolIsReusable

{

get

{

returnfalse;

}

注：以上的截图控件调用的核心部分已经全部封装到了中，一般情况下，你不需要修改只文件内容，只需要引用，并且自己另外写JS来与UI集成即可，具体见网站中的示例代码()。

12 / 12

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

发布评论取消回复

最近发表

相关推荐

标签列表

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

发布评论 取消回复

最近发表

相关推荐

标签列表

发布评论取消回复