Web截屏控件布署文档

版权所有 2009-2012 武汉命运科技有限公司

保留所有权利

官方网站：http://www.ncmem.com/

官方博客：http://www.cnblogs.com/xproer

产品首页：http://www.ncmem.com/webplug/screencapture/index.aspx

在线演示-标准版：http://www.ncmem.com/products/screencapture/demo/index.html

在线演示-专业版：http://www.ncmem.com/products/screencapture/demo2/index.html

在线演示-FCKEditor2.x： http://www.ncmem.com/products/screencapture/fckeditor2x/index.html

在线演示-CKEditor3.x：http://www.ncmem.com/products/screencapture/ckeditor3x/index.html

在线演示-KindEditor3.x：http://www.ncmem.com/products/screencapture/kindeditor3x/index.html

在线演示-xhEditor1.x：http://www.ncmem.com/products/screencapture/kindeditor3x/index.html

产品介绍：http://www.cnblogs.com/xproer/archive/2011/02/19/1958398.html

开发文档-JSP：http://www.cnblogs.com/xproer/archive/2011/05/20/2051862.html

开发文档-PHP：http://www.cnblogs.com/xproer/archive/2011/05/16/2047915.html

开发文档-ASP.NET：http://www.cnblogs.com/xproer/archive/2011/01/09/1931278.html

Discuz!X2 手动安装教程：http://www.cnblogs.com/xproer/archive/2012/04/19/2457138.html

Discuz!X2 自动安装教程：http://www.cnblogs.com/xproer/archive/2012/03/28/2420616.html

升级日志：http://www.cnblogs.com/xproer/archive/2010/12/04/1896399.html

资源下载：cab安装包,开发文档,Discuz!X2截屏插件

示例下载(ASP.NET)：标准版示例,FCKEditor2.x示例,CKEditor3.x示例,KindEditor3.x示例,xhEditor3.x示例

示例下载(JSP)：标准版示例,专业版示例,FCKEditor2.x示例,CKEditor3.x示例,KindEditor3.x示例

示例下载(PHP)：标准版示例,专业版示例,

VC运行库：http://www.microsoft.com/downloads/details.aspx?FamilyID=9b2da534-3e03-4391-8a4d-074b9f2bc1bf

联系邮箱：[email protected]

联系QQ：1085617561

更新记录：

更新时间	描述
2012-04-04	增加与Discuz!X2整合章节
2012-04-19	增加Discuz!X2截屏插件手动安装方法章节
2012-05-14	更新示例代码 增加“相关问题”章节 更新“设置服务器编码”章节

 

 

1.      集成到现有系统中

主要步骤：

1. 上传控件相关的文件

2. 修改cab文件下载地址及classid序列号

3. 修改控件上传地址及编码

 

1. 上传文件

根据不同的项目类型上传相应的文件：asp,asp.net,jsp,php

asp.net // 请根据不同的项目类型上传相应的文件。例如php项目则上传php文件夹

ScreenCapture

注意：

     请不要手动解压ScreenCapture.cab文件，请此文件上传到服务器中，IE浏览器会自动下载并安装控件。CAB文件是一个控件自动安装包。

 

2. 修改cab文件下载地址和classid序列号

打开ScreenCapture.js文件查找以下代码，修改codebase的地址。codebase指ScreenCapture.cab在Web服务器中的位置。

this .Config = {

         "PostUrl"          : "http://www.ncmem.com/upload.aspx"

         ,"EncodeType"      : "utf-8"

         , "LicensedCompany": " 北京新颖网络"

         , "Language"      :"zhcn"// 语言设置，en,zhcn

         , "Clsid"          : "B10327CB-56EC-43D9-BED0-C91E4AE8F42E"// 这里要仔细检查，在购买产品后我们会为每个公司单独生成Clsid

         , "ProjID"         : "Xproer.ScreenCapture"// 将Xproer修改为单独生成的名称。在购买产品后我们会为每个公司单独生成ProjID

         , "CabPath"        : "http://www.ncmem.com/products/screencapture/demo/ScreenCapture.cab#version=1,6,21,54771"// 请仔细检查，此地址一定要正确

     };

说明：

     classid 是唯一的，它的作用是避免与其它公司的控件产生冲突。购买产品后我们会为每个公司生成一个唯一的classid号。

codebase 也可以使用相对路径。如果ScreenCapture.cab在Web服务器的根目录中，codebase也可以写为/ScreenCapture.cab#version=1,4,8,45272

如果公司的域名是www.qq.com，ScreenCapture.cab文件在服务器的根目录中，那么codebase应该为http://www.qq.com/ScreenCapture.cab#version=1,4,8,45272。每个公司应该将codebase改为自已服务器的地址。

CabPath 告诉IE浏览器从哪里下载控件并安装。

如果公司名称是QQ，则ActiveX的Clsid如下：

QQ.ScreenCapture

 

注意：

当控件升级(版本号修改)或CAB文件位置改变，必须修改ScreenCapture.js中的代码。否则用户的IE浏览器将无法正常安装控件。

 

3. 修改控件的上传地址

打开index.html，将PostUrl改为实际的上传地址：

scpMgr .Config["PostUrl"]    = "http://www.ncmem.com/products/screencapture/demo/upload.aspx";

scpMgr .Config["EncodeType"] = "GB2312";

注意：

PostUrl 必须使用绝对路径，不能使用相对路径。下面的路径写法都是错误的：

/upload.php

/web/upload.php

 

2.      升级控件

一般情况下，控件升级后ScreenCapture.cab会更新，同时版本号也会更新。

主要步骤如下：

1.      重新上传ScreenCapture.cab文件。

2.      更新ScreenCapture.js中的版本号。

 

2.1.   更新ScreenCapture.js中的版本号

打开ScreenCapture.js文件，查找以下代码，将version=后面的版本号改为最新的版本号。

     this.Config = {

         "PostUrl"          : "http://www.ncmem.com/upload.aspx"

         ,"EncodeType"      : "utf-8"

         , "LicensedCompany": " 北京新颖网络"

         , "Language"       :"zhcn"// 语言设置，en,zhcn

         , "Clsid"           : "B10327CB-56EC-43D9-BED0-C91E4AE8F42E"

         , "ProjID"         : "Xproer.ScreenCapture"

         , "CabPath"        : "http://www.ncmem.com/products/screencapture/demo/ScreenCapture.cab#version=1,6,21,54771"

     };

说明：

更新版本号后，IE会自动提示用户安装最新的控件。

 

3.      用户接口

3.1.   配置上传地址

如果截屏控件需要在多个页面使用，推荐将上传地址写到ScreenCapture.js中，前台不配置上传地址。这样可以使前台引用代码更加简洁。

< div id="CaptureMessage">

     <img alt=" 进度图标" src="ScreenCapture/SL_Uploading.gif" /><span> 图片上传中...</span><span>10%</span>

</ div >

 

< script type="text/javascript" language="javascript">

     var scpMgr = new CaptureManager("CaptureMessage");

     // 请将下面地址改为实际上传地址。

     //screenCapture.Config["PostUrl"] = "http://www.ncmem.com/products/screencapture/demo2/upload.aspx";

     scpMgr.Config["PostUrl"] = "http://localhost:1881/asp.net/upload.aspx";

     scpMgr.Config["EncodeType"] = "GB2312";

 

</ script >

注意：

PostUrl 必须使用绝对路径，不能使用相对路径。下面路径的写法都是错误的。

scpMgr .Config["PostUrl"] = "/asp.net/upload.aspx";

scpMgr .Config["PostUrl"] = "/php/upload.php";

scpMgr .Config["PostUrl"] = "/jsp/upload.jsp";

 

3.2.   设置服务器编码方式

如果截屏控件需要在多个页面使用，推荐在ScreenCapture.js中设置编码，前台只保留控件的引用代码。

< div id="CaptureMessage">

     <img alt=" 进度图标" src="ScreenCapture/SL_Uploading.gif" /><span> 图片上传中...</span><span>10%</span>

</ div >

 

< script type="text/javascript" language="javascript">

     var scpMgr = new CaptureManager("CaptureMessage");

     scpMgr.Config["EncodeType"] = "GB2312";

</ script >

 

3.3.   自定义图片上传完毕的事件

默认情况下ScreenCapture.js会将上传完成的图片显示到前台的一个图片对象(IMG)中。在整合到系统的过程中可根据实际情况修改逻辑。

// 事件-传输完毕

function ScreenCapture_Complete(obj)

{

     //var fid = arguments[0];

     ScreenCaptureAtl = null;

     obj.Progress.innerText = "100%";

     obj.Message.innerText = " 上传完成" ;

     obj.State = ScreenCaptureState.Complete;

     obj.InfDiv.style.display = "none"; // 隐藏信息层

     // 显示截取的屏幕图片

     var img = document.getElementById("ScreenImg");

     img.src = obj.ATL.Response;

     img.style.display = "block";

}

3.4.   设置附加信息

附加信息的作用就是在上传图片的同时向服务器提交额外的字段信息。比如当用户向服务器上传截图时，服务器需要知道是哪位用户上传的截图，这时可以将用户ID添加到附加信息中，这样服务器在获取截图信息的同时也能够根据附加信息知道是哪位用户上传的截图。

客户端：

scpMgr .Fields["UserName"] = "test";

服务端：

string fname = Request.Form["UserName"];

 

开发人员可以根据自已的业务需求来扩展附加信息：

客户端：

scpMgr .Fields[ "f1" ] = "f1";

scpMgr .Fields[ "f2" ] = "f2";

scpMgr .Fields[ "f3" ] = "f3";

scpMgr .Fields[ "f4" ] = "f4";

scpMgr .Fields[ "f5" ] = "f5";

服务端(ASP.NET)：

string f1 = Request.Form["f1"];

string f1 = Request.Form["f2"];

string f1 = Request.Form["f3"];

string f1 = Request.Form["f4"];

string f1 = Request.Form["f5"];

服务端(PHP)

$f1 = $_POST [ 'f1' ] ;

$f2 = $_POST [ 'f2' ] ;

$f3 = $_POST [ 'f3' ] ;

$f4 = $_POST [ 'f4' ] ;

$f5 = $_POST [ 'f5' ] ;

 

4.      快速开始

设置服务器编码格式

以ASP.NET项目为例。在ASP.NET项目中修改服务器的编码格式是根据web.config中的设置确定的。

< globalization requestEncoding = "utf-8"responseEncoding="utf-8"/>

 

调整服务器接收的文件大小

打开web.config文件，修改下面的字段信息。

< httpRuntime maxRequestLength = "2097151"executionTimeout="3600" />

 

设置插件的编码格式

打开web.config文件，修改下面的字段信息。

manager .Config["EncodeType"] = "UTF-8";// 注意，此格式必须与服务器端的设置对应。默认为UTF-8

 

设置接收处理上传的文件页面

manager .Config["PostUrl"] = "http://localhost:1595/upload.aspx";

 

编写服务端接收文件页面的处理代码。

ASP.NET(C#)

using System;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.IO;

using System.Text;

 

namespace ScreenCapture11325

{

     public partial class upload : System.Web.UI.Page

     {

         protected void Page_Load(object sender, EventArgs e)

         {

              string fname = Request.Form["UserName"];

 

              if (Request.Files.Count > 0)

              {

                   HttpPostedFile file = Request.Files.Get(0);

                   string timeCur = DateTime.Now.ToString("yyyy-MM-dd");

                   // 上传文件夹。相对路径 /upload/2012-2-3/

                   string uploadFolder = "/upload/" + timeCur + "/";

                   string folder = Server.MapPath(uploadFolder);

                   // 自动创建文件夹

                   if (!Directory.Exists(folder))

                   {

                       Directory.CreateDirectory(folder);

                   }

 

                   // 防止用户上传非图片文件

                  string ext = Path.GetExtension(file.FileName).ToLower();

                   if (ext == ".gif"

                       || ext == ".bmp"

                       || ext == ".png"

                       || ext == ".jpg")

                   {

                       // 在这里我们将会根据时间重新生成一个名称

                       string time = DateTime.Now.ToString("HHmmssffff") + ext;

                       string filePath = Path.Combine(folder, time);

 

                       file.SaveAs(filePath);

                       // 最后将新生成的文件名称发给客户端

                       Response.Write(uploadFolder + time);

                   }

              }

         }

     }

}

 

5.      JavaScript对象

5.1.   CaptureManager对象

类型：JavaScript

截屏插件管理类。提供插件信息配置及管理功能。

 

方法

Capture方法

启动截屏插件。

 

语法

void Capture (fid);

 

属性

Fields属性

上传时附加的额外信息。

 

注意： 此属性暂时不支持中文字符串。

 

以下示例演示上传时添加用户名和密码的额外信息：

var scpMgr = new CaptureManager("CaptureMessage");

scpMgr .Fields["UserName"] = "test";

scpMgr .Fields["UserPass"] = "test";

 

Config属性

提供全局配置信息。

 

语法：

this .Config = {

         "EncodeType" : "UTF-8"

         ,"PostUrl"    : "http://www.ncmem.com/upload.aspx"

     };

 

EncodeType值

服务器编码方式。

此属性必须和web.config配置文件对应。

 

如果服务器端编码方式是UTF-8

< globalization requestEncoding = "utf-8"responseEncoding="utf-8"/>

则客户端也必须是UTF-8

var scpMgr = new CaptureManager("CaptureMessage");

scpMgr .Config["EncodeType"] = "UTF-8";

 

如果服务端编码方式是GB2312

< globalization requestEncoding = "gb2312"responseEncoding="gb2312"/>

则客户端也必须是GB2312

var scpMgr = new FileTransferManager("FilePostLister");

scpMgr .Config["EncodeType"] = "GB2312";

 

PostUrl值

接收处理上传文件的URL。

 

ImageType值

截取屏幕后保存的格式。截屏插件将以此格式上传到服务器上。

支持的格式如下：

PNG,GIF,JPG,BMP

 

5.2.   ScreenCapture对象

类型 ：JavaScript

截屏插件。ActiveX截屏插件的封装类。

 

语法：

JavaScript （声明）

function ScreenCapture() { }

 

属性

	名称	说明
	Message	截屏信息对象
	Progress	上传进度。
	TimeOutID	定时器

 

 

6.      ActiveX对象

6.1.   Xproer.ScreenCapture对象

CLSID ： B10327CB-56EC-43D9-BED0-C91E4AE8F42E

类型 ：ActiveX

截屏插件。

 

Capture方法

开始截取屏幕。

 

6.1.1.    向服务器提交数据

以下代码是控件向服务器提交的数据。

Content-Disposition: filename="D:\ScreenCapture.jpg"\r\n

Content-Type: application/octet-stream\r\n\r\n

 

7.      UI模板

您可以根据实际需求来修改以下模板。

 

HTML:

< div id="ScreenCaptureMessage">

     <div id="CaptureMessage">

         <img alt=" 进度图标" src="SL_Uploading.gif"/><span> 图片上传中...</span><span>10%</span>

     </div>

     <input type="button" value=" 截屏" onclick="CaptureScreen()" />

</ div >

 

8.      应用示例

以下示例将会弹出一个对话框并将用户选定的文件上传到服务器中。

JavaScript:

< script type="text/javascript" language="javascript">

     var AcxScreen = null;

     var scpMgr = new CaptureManager("CaptureMessage");// 将截屏信息层ID传给截屏管理器

     scpMgr.Config["PostUrl"] = "http://localhost:1595/upload.aspx";// 设置上传路径。注意此地址不能为相对地址。只能是绝对地址。

 

     function CaptureScreen()

     {

         scpMgr.Capture();

     }

</ script >

 

9.      与Discuz!X2整合-手动安装方法

由于许多插件会使用相同的嵌入点，Web截屏插件使用的嵌入点是 post_bottom_output 。在Discuz!X2中如果多个控件使用相同的嵌入点会产生冲突，导致页面样式被破坏，或插件加载不正常，所以我们提供了手动安装方法。

 

主要步骤如下：

1. 打开文件screencapture/scp.inc.php

修改下列代码：

$siteUrl = "http://localhost:81/dz/" ;

将$setUrl的值改为Discuz!论坛地址。

 

2. 将screencapture文件夹上传到 discus 的 source/plugin/下，效果如下

 

 

3. 把如下代码加到forum.php文件php代码的最后一行的“?>”之前：

require DISCUZ_ROOT. './source/plugin/screencapture/scp.inc.php' ;

完整代码看起来如下：

require DISCUZ_ROOT. './source/module/forum/forum_'.$mod.'.php' ;

require DISCUZ_ROOT. './source/plugin/screencapture/scp.inc.php' ;// 加载截屏插件

?>

 

10. 与Discuz!X2整合-后台自动安装方法

此教程提供给用户快速安装。适合普通用户快速安装使用。

注意：

由于Web截屏插件使用的嵌入点是post_bottom_ouput，也可能有其它的插件使用此嵌入点。这会与Web截屏插件产生冲突，导致页面样式被破坏。如果有其它插件使用此嵌入点推荐使用手动安装方法来安装。

 

主要步骤如下：

1. 修改classid和projID

2. 上传screencapture文件夹

3. 在Discuz!X2后台安装和启用插件

 

10.1.        修改classid和projid

打开文件screencapture\js\ScreenCapture.js

找到如下语句，将Clsid和ProjID改为实际字符串。同时将版本号改为控件实际版本号。

     this.Config = {

         "EncodeType"       : "utf-8"

         , "LicensedCompany": " 北京新颖网络"

         , "Clsid"     : "B10327CB-56EC-43D9-BED0-C91E4AE8F42E"

         , "ProjID"    : "Xproer.ScreenCapture"

         , "PostUrl"   : "source/plugin/screencapture/upload.php"

         , "CabPath"   : "source/plugin/screencapture/cab/ScreenCapture.cab#version=1,6,21,54771"

         , "SiteUrl" : ""// 网站路径 http://localhost:81/dz/

     };

说明：

     为了避免和其它公司的控件产生冲突，我们会为每一个客户单独生成一个唯一的Clsid和ProjID。

 

10.2.        上传screencapture文件夹

将screencapture文件夹上传到/source/plugin/文件夹中。如下图所示：

 

 

10.3.        在Discuz!X2后台安装和启用插件

登陆后台，安装插件

 

启用插件

 

 

10.4.        整合截图

编辑器常用工具条：

 

编辑器高级工具条

 

点击截屏按钮出现截屏框