ScreenCapture-开发.doc

Web截屏控件标准版开发文档版权所有 2009-2012 武汉命运科技有限公司保留所有权利官方网站：官方博客：/xproer产品首页：/webplug/screencapture/index.aspx在线演示-标准版：/products/screencapture/demo/index.html在线演示-专业版：/products/screencapture/demo2/index.html在线演示-FCKEditor2.x：/products/screencapture/fckeditor2x/index.html在线演示-CKEditor3.x：/products/screencapture/ckeditor3x/index.html在线演示-KindEditor3.x：/products/screencapture/kindeditor3x/index.html在线演示-xhEditor1.x：/products/screencapture/xhEditor/index.html产品介绍：/xproer/archive/2011/02/19/1958398.html开发文档-JSP：/xproer/archive/2011/05/20/2051862.html开发文档-PHP：/xproer/archive/2011/05/16/2047915.html开发文档-ASP.NET：/xproer/archive/2011/01/09/1931278.htmlDiscuz!X2手动安装教程：/xproer/archive/2012/04/19/2457138.htmlDiscuz!X2自动安装教程：/xproer/archive/2012/03/28/2420616.html升级日志：/xproer/archive/2010/12/04/1896399.html示例下载-标准版：/download/ScreenCapture-demo.rar示例下载-专业版：/download/ScreenCapturePro-demo.rar示例下载-FCKEditor2.x：/download/ScreenCapture-FCKEditor2x.rar示例下载-Discuz!X2插件：/download/ScreenCapture-DiscuzX2.rar示例下载-xhEditor1.1.13：/download/ScreenCapture-xhEditor.rar文档下载：/download/ScreenCapture-doc.rar数字证书补丁：/download/rootsupd.rarVC运行库：/downloads/details.aspx?FamilyID=9b2da534-3e03-4391-8a4d-074b9f2bc1bf%20联系邮箱：1085617561联系QQ：1085617561更新记录：更新时间描述2012-04-04增加与Discuz!X2整合章节2012-04-19增加Discuz!X2截屏插件手动安装方法章节2012-05-14更新示例代码增加“相关问题”章节更新“设置服务器编码”章节2012-05-26更新JSP上传示例代码。1. 集成到现有系统中主要步骤：1.上传控件相关的文件2.修改cab文件下载地址及classid序列号3.修改控件上传地址及编码1.上传文件根据不同的项目类型上传相应的文件：asp,,jsp,/请根据不同的项目类型上传相应的文件。例如php项目则上传php文件夹ScreenCapture注意：请不要手动解压ScreenCapture.cab文件，请此文件上传到服务器中，IE浏览器会自动下载并安装控件。CAB文件是一个控件自动安装包。2.修改cab文件下载地址和classid序列号打开ScreenCapture.js文件查找以下代码，修改codebase的地址。codebase指ScreenCapture.cab在Web服务器中的位置。this.Config = PostUrl: /upload.aspx,EncodeType: utf-8, LicensedCompany: 北京新颖网络, Language:zhcn/语言设置，en,zhcn, Clsid: B10327CB-56EC-43D9-BED0-C91E4AE8F42E/这里要仔细检查，在购买产品后我们会为每个公司单独生成Clsid, ProjID: Xproer.ScreenCapture/将Xproer修改为单独生成的名称。在购买产品后我们会为每个公司单独生成ProjID, CabPath: /products/screencapture/demo/ScreenCapture.cab#version=1,6,21,54771/请仔细检查，此地址一定要正确;说明：classid是唯一的，它的作用是避免与其它公司的控件产生冲突。购买产品后我们会为每个公司生成一个唯一的classid号。codebase也可以使用相对路径。如果ScreenCapture.cab在Web服务器的根目录中，codebase也可以写为/ScreenCapture.cab#version=1,4,8,45272如果公司的域名是，ScreenCapture.cab文件在服务器的根目录中，那么codebase应该为/ScreenCapture.cab#version=1,4,8,45272。每个公司应该将codebase改为自已服务器的地址。CabPath告诉IE浏览器从哪里下载控件并安装。如果公司名称是QQ，则ActiveX的ProjID如下：QQ.ScreenCapture注意：当控件升级(版本号修改)或CAB文件位置改变，必须修改ScreenCapture.js中的代码。否则用户的IE浏览器将无法正常安装控件。3.修改控件的上传地址打开index.html，将PostUrl改为实际的上传地址：scpMgr.ConfigPostUrl = /products/screencapture/demo/upload.aspx;scpMgr.ConfigEncodeType = GB2312;注意：PostUrl必须使用绝对路径，不能使用相对路径。下面的路径写法都是错误的：/upload.php/web/upload.php2. 升级控件一般情况下，控件升级后ScreenCapture.cab会更新，同时版本号也会更新。再次打开IE浏览器时，会出现类似如下提示：主要步骤如下：1. 重新上传ScreenCapture.cab文件。2. 更新ScreenCapture.js中的版本号。2.1. 更新ScreenCapture.js中的版本号打开ScreenCapture.js文件，查找以下代码，将version=后面的版本号改为最新的版本号。this.Config = PostUrl: /upload.aspx,EncodeType: utf-8, LicensedCompany: 北京新颖网络, Language:zhcn/语言设置，en,zhcn, Clsid: B10327CB-56EC-43D9-BED0-C91E4AE8F42E, ProjID: Xproer.ScreenCapture, CabPath: /products/screencapture/demo/ScreenCapture.cab#version=1,6,21,54771;说明：更新版本号后，IE会自动提示用户安装最新的控件。3. 用户接口3.1. 配置上传地址如果截屏控件需要在多个页面使用，推荐将上传地址写到ScreenCapture.js中，前台不配置上传地址。这样可以使前台引用代码更加简洁。图片上传中.10%var scpMgr = new CaptureManager(CaptureMessage);/请将下面地址改为实际上传地址。/screenCapture.ConfigPostUrl = /products/screencapture/demo2/upload.aspx;scpMgr.ConfigPostUrl = http:/localhost:1881//upload.aspx;scpMgr.ConfigEncodeType = GB2312;注意：PostUrl必须使用绝对路径，不能使用相对路径。下面路径的写法都是错误的。scpMgr.ConfigPostUrl = //upload.aspx;scpMgr.ConfigPostUrl = /php/upload.php;scpMgr.ConfigPostUrl = /jsp/upload.jsp;3.2. 设置服务器编码方式如果截屏控件需要在多个页面使用，推荐在ScreenCapture.js中设置编码，前台只保留控件的引用代码。图片上传中.10%var scpMgr = new CaptureManager(CaptureMessage);scpMgr.ConfigEncodeType = GB2312;3.3. 自定义图片上传完毕的事件默认情况下ScreenCapture.js会将上传完成的图片显示到前台的一个图片对象(IMG)中。在整合到系统的过程中可根据实际情况修改逻辑。/事件-传输完毕function ScreenCapture_Complete(obj)/var fid = arguments0;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.FieldsUserName = test;服务端：string fname = Request.FormUserName; 开发人员可以根据自已的业务需求来扩展附加信息：客户端：scpMgr.Fieldsf1 = f1;scpMgr.Fieldsf2 = f2;scpMgr.Fieldsf3 = f3;scpMgr.Fieldsf4 = f4;scpMgr.Fieldsf5 = f5;服务端(ASP.NET)：string f1 = Request.Formf1; string f1 = Request.Formf2; string f1 = Request.Formf3; string f1 = Request.Formf4; string f1 = Request.Formf5; 服务端(PHP)$f1 = $_POSTf1;$f2 = $_POSTf2;$f3 = $_POSTf3;$f4 = $_POSTf4;$f5 = $_POSTf5;4. 快速开始设置服务器编码格式以ASP.NET项目为例。在ASP.NET项目中修改服务器的编码格式是根据web.config中的设置确定的。调整服务器接收的文件大小打开web.config文件，修改下面的字段信息。设置插件的编码格式打开web.config文件，修改下面的字段信息。manager.ConfigEncodeType = UTF-8;/注意，此格式必须与服务器端的设置对应。默认为UTF-8设置接收处理上传的文件页面manager.ConfigPostUrl = 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 ScreenCapture11325public partial class upload : System.Web.UI.Pageprotected void Page_Load(object sender, EventArgs e)string fname = Request.FormUserName;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.FieldsUserName = test;scpMgr.FieldsUserPass = test;Config属性提供全局配置信息。语法：this.Config = EncodeType : UTF-8,PostUrl: /upload.aspx;EncodeType值服务器编码方式。此属性必须和web.config配置文件对应。如果服务器端编码方式是UTF-8则客户端也必须是UTF-8var scpMgr = new CaptureManager(CaptureMessage);scpMgr.ConfigEncodeType = UTF-8;如果服务端编码方式是GB2312则客户端也必须是GB2312var scpMgr = new FileTransferManager(FilePostLister);scpMgr.ConfigEncodeType = GB2312;PostUrl值接收处理上传文件的URL。ImageType值截取屏幕后保存的格式。截屏插件将以此格式上传到服务器上。支持的格式如下：PNG,GIF,JPG,BMP5.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.jpgrnContent-Type: application/octet-streamrnrn7. UI模板您可以根据实际需求来修改以下模板。HTML:图片上传中.10%8. 应用示例以下示例将会弹出一个对话框并将用户选定的文件上传到服务器中。JavaScript:var AcxScreen = null;var scpMgr = new CaptureManager(CaptureMessage);/将截屏信息层ID传给截屏管理器scpMgr.ConfigPostUrl = http:/localhost:1595/upload.aspx;/设置上传路径。注意此地址不能为相对地址。只能是绝对地址。function CaptureScreen()scpMgr.Capture();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和projID2.上传screencapture文件夹3.在Discuz!X2后台安装和启用插件10.1. 修改classid和projid打开文件screencapturejsScreenCapture.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. 整合截图编辑器常用工具条：编辑器高级工具条点击截屏按钮出现截屏框11. 服务器支持11.1. ASP.NET(C#)开发语言：ASP.NET(C#).NET框架：2.0说明：ScreenCapture控件是使用标准HTTP FORM方式上传的，所以如果服务器是使用的其它语言，例如PHP,JSP使用相应的HTTP FORM方式处理接受文件即可以。11.1.1. web.config配置文件说明：如果需要上传大文件，则需要修改httpRuntime中的maxRequestLength属性值。同时还需要修改executionTimeout值。requestEncoding值和控件的编码必须保持一致，否则服务器接受上传文件名称会出现乱码。 !- 11.1.2. upload.aspx代码以下代码演示根据当前日期创建文件夹，并将屏幕截图以日期格式保存在日期文件夹中。/upload/2012-3-8/ASP.NET(C#)using System;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.IO;using System.Text;namespace ScreenCapture11325public partial class upload : System.Web.UI.Pageprotected void Page_Load(object sender, EventArgs e)string fname = Request.FormUserName;int len = Request.ContentLength;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);11.2. JSP11.2.1. Xproer.Uploader.java代码package Xproer;import java.io.File;import java.io.IOException;import java.text.SimpleDateFormat;import java.util.Date;import javax.servlet.http.HttpServletRequest;import javax.servlet.jsp.PageContext;import com.jspsmart.upload.*;/* * 上传对象 * 更新记录： * 2012-05-24 创建 * */public class Uploader public PageContext m_pc;String m_folder;/上传文件夹。D:webappsWordPasteruploadString m_curBasePath;/当前文件路径。http:/localhost:8080/WordPaster/String m_filePathRel;/文件在服务器中的相对路径。http:/localhost:8080/WordPaster/upload/2012/05/24/String m_fileName;/文件名称。11223344.png/* * 在JSP页面中构造。传入 pageContext * */public Uploader(PageContext pc,HttpServletRequest sr)this.m_pc = pc;String path = sr.getContextPath();this.m_curBasePath = sr.getScheme()+:/ + sr.getServerName()+: + sr.getServerPort() + path+/;/* * 获取文件相对路径。 * 返回值： * http:/localhost:8080/WordPaster/upload/2012/05/24/11223344.png * */public String GetFilePathRel()return this.m_filePathRel + this.m_fileName;/* * 创建上传文件夹 * 20120524 * */public void CreateFolder()Date timeCur = new Date();SimpleDateFormat fmtYY = new SimpleDateFormat(yyyy);SimpleDateFormat fmtMM = new SimpleDateFormat(MM);SimpleDateFormat fmtDD = new SimpleDateFormat(dd);String strYY = fmtYY.format(timeCur);String strMM = fmtMM.format(timeCur);String strDD = fmtDD.format