Web图片编辑控件开发文档-Xproer.ImageEditor

版权所有 2009-2014 荆门泽优软件有限公司

保留所有权利

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

产品首页：http://www.ncmem.com/webplug/image-editor/index.asp

在线演示：http://www.ncmem.com/products/image-editor/demo/index.html

开发文档：/article/5268226.html

升级日志：/article/5268225.html

资源下载：cab安装包(x86),cab安装包(x64),crx安装包,xpi安装包,exe安装包,开发文档,证书补丁,

示例下载：asp示例,asp.net示例,jsp示例,php示例,

联系信箱：1085617561@qq.com

销售QQ：1085617561

技术QQ：1269085759

更新记录：c

更新时间	描述
2014-02-13	发布产品

​

1. 搭建测试环境

搭建测试环境步骤如下：

1.搭建Web服务器。IIS,Apatch, Apache Tomcat 6

2.发布项目，将项目布署到Web服务器中。

3.修改HttpUploader.js中的上传地址，将上传地址改为项目的测试地址。

1.1. ASP示例



1.2. ASP.NET(C#)示例



1.3. JSP示例



1.4. PHP示例

2. 正式包布署说明

说明：在购买产品后我们会以邮件方式提供正式包文件。

1.将ImageEditor.cab,ImageEditor64.cab,ImageEditor.crx,ImageEditor.xpi上传到正式服务器中。

ImageEditor.cab是IE(x86)浏览器控件安装包。

ImageEditor64.cab是IE(x64)浏览器控件安装包。

ImageEditor.crx是Chrome浏览器控件安装包。

ImageEditor.xpi是Firefox浏览器控件安装包。

2.修改ImageEditor.js文件中的配置信息。

Firefox,Chrome,cab(x86),cab(x64)布署说明：

3. 控件升级

一般情况下控件升级后只需要更新服务器的ImageEditor.cab文件和修改ImageEditor.js中的控件版本号。用户打开浏览器时IE会自动提示用户安装最新的控件。效果图如下：





主要步骤如下：

1.重新上传ImageEditor.cab,ImageEditor64.cab,ImageEditor.crx,ImageEditor.xpi,ImageEditor.exe文件

2.修改ImageEditor.js中的控件版本号。

3.1. 重新上传控件安装包文件 控件更新后，我们会以邮件方式提供最新的控件更新包。开发人员将控件更新包布署到服务器，覆盖旧的控件包即可。

ImageEditor.cab为IE(x86)浏览器控件安装包。

ImageEditor64.cab为IE(x64)浏览器控件安装包。

ImageEditor.crx为Chrome浏览器控件安装包。

ImageEditor.xpi为Firefox浏览器控件安装包。

3.2. 修改ImageEditor.js中的控件版本号 一般情况下，控件更新后版本号也会更新。在重新上传控件更新包，需要修改控件的版本号。

4. 用户接口

4.1. 控件提交的文件字段 "Content-Disposition: form-data; name="FileName"; filename="

4.2. 配置上传地址 文件上传地址一般都在ImageEditor.js文件中配置，也可以在引用页面赋值。

     _this.Config = {

           "Company"        : "荆门泽优软件有限公司"

         , "Version"        : "1,0,0,20658"//当前控件版本号。

         , "License"        : ""

         , "FileFieldName"  : "img"//文件字段名称

         , "Authenticate"   : ""//Windows验证方式。basic,ntlm

         , "ClipWidth"      : "104"//剪切框宽度

         , "ClipHeight"     : "104"//剪切框高度

         , "ImageUploadType": "jpg"//图片上专格式：jpg,png,bmp

         , "JpgQulity"      : 100//JPG图片质量，0~100

         , "Watermark"      : false//是否启用水印

         , "Clsid"          : "E6922CFB-1FCF-46C6-9831-35E271B46399"

         , "ProjID"         : "Xproer.ImageEditor"

         , "AppPath"        : "/"    //根目录："/"，子目录："/web/"

         , "CabPath"        : "http://www.ncmem.com/products/image-editor/demo/ImageEditor.cab"

         , "PostUrl"        : "http://localhost:1595/asp.net/upload.aspx"

         //64bit

         , "Clsid64"        : "F1EB4FB3-2F9C-401b-B8CF-C85B937E5877"

         , "ProjID64"       : "Xproer.ImageEditor64"

         , "CabPath64"      : "http://www.ncmem.com/products/image-editor/demo/ImageEditor64.cab"

         //Firefox

         , "CabPathFF"      : "http://www.ncmem.com/products/image-edit/demo/ImageEditor.xpi"

         , "MimeType"       : "application/npImgEdt"

         //Chrome

         , "CabPathChr"     : "http://www.ncmem.com/products/image-edit/demo/ImageEditor.crx"

         , "MimeTypeChr"    : "application/npImgEdt"

         , "CrxName"        : "npImgEdt"

     };

​

4.3. 设置附加信息 自定义附加字段在ImageEditor.js中定义，也可以不用定义：





或在引用页面通过Fields属性来添加自定义字段：





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

客户端：

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

服务端：

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

 

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

客户端：

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

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

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

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

imgEditor.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"];

​

4.4. 设置控件大小







4.5. 设置图片上传格式 控件可将图片转换为png,jpg,bmp三种格式上传到服务器中。





4.6. 检查控件是否需要更新 通过Version属性可获取当前控件版本号

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

         var imgEditor = new ImageEditor();

         $(document).ready(function ()

         {

              imgEditor.Init();

 

              if (imgEditor.Browser.NeedUpdate())

              {

                   alert("控件需要更新");

              }

               else

              {

                   alert("控件不更新");

              }

         });

        

     </script>

​

4.7. 判断控件是否已安装      <script language="javascript" type="text/javascript">

         var imgEditor = new ImageEditor();

 

         $(document).ready(function ()

         {

              imgEditor.Init();

 

              if (imgEditor.Browser.Check())

              {

                   alert("控件已安装");

              }

              else

              {

                   alert("控件未安装");

              }

         });

     </script>

5. 相关问题

5.1. 手动卸载控件-Windows XP 主要步骤如下：

1.关闭所有IE

2.打开cmd





3.进入C:\Windows\System32





4.输入命令regsvr32 -u ImageEditor.dll





5.删除HttpUploader5.dll文件。





5.2. 手动卸载控件-Windows 7(x86) 主要步骤如下：

1.关闭所有IE浏览器。

2.以管理员权限打开CMD





3.进入C:\Windows\System32文件夹





4.使用以下命令卸载控件

regsvr32 -u ImageEditor.dll





5.删除ImageEditor.dll文件。

5.3. 手动卸载控件-Windows 7(x64) 主要步骤如下：

1.关闭所有IE浏览器。

2.以管理员权限打开CMD





3.进入C:\Windows\SysWOW64文件夹





4.使用以下命令卸载控件

regsvr32 -u ImageEditor.dll





5.删除ImageEditor.dll文件。





5.4. 卸载控件-360安全浏览器 1.打开我的扩展





在插件列表中点击“卸载”按钮卸载插件。





5.5. 卸载控件-Chrome 1.打开扩展程序





2.删除插件





5.6. 卸载控件-Firefox 1.打开附加组件





2.删除组件





5.7. 用户无法注册控件 问题分析：此问题是由于用户系统缺少VC库导致的，

解决方法：

请先下载VC库并安装。

下载地址：http://www.microsoft.com/downloads/details.aspx?FamilyID=9b2da534-3e03-4391-8a4d-074b9f2bc1bf%20

5.8. 浏览器一直提供安装控件 问题分析：此问题是由于HttpUploader.js中的版本号不正确导致的。

解决方法：

1. 检查HttpUploader.js中所有控件的版本号是否正确。

2. 清除IE浏览器缓存，重新打开页面。

5.9. 加截控件错误 截图如下：





问题分析：

示例中控件的加截方式是通过下面的方式加截的：

document.write(object code);

这种方式在复杂的HTML中(比如ExtJS框架，复杂Iframe嵌套)可能会导致IE无法正常加截控件。

解决方法：

直接将控件的加截代码写到HTML中，让IE静态加截。示例代码如下：

<!--加图像编辑控件开始->

<div style="display:none;">

<!--HttpUploader-->

<object id="objImageEditor" classid="clsid:E6922CFB-1FCF-46C6-9831-35E271B46399"

codebase="http://www.ncmem.com/products/http-uploader3/demo/HttpUploader.cab#version=2,5,28,54987" width="325" height="351" ></object>

</div>

<!--加截断点续传控件结束->

注意：

以静态方式加截控件需要保证classid和codebase必须正确。否则IE无法加截控件。

5.10. 注册控件错误



解决方法：

一、在Windows 7 下打开控制面版-用户帐号-打开或关闭“用户帐户控制”，把“使用用户帐户控制（UAC）帮助保护你的计算机”前的对勾去掉，如下图所示：





二、在Windows 7下打开 控制面版-用户帐号-更改用户帐户控制设置，将 始终通知 下面的小方块托动到最下面，如下图:





三、重启电脑。

5.11. 如何关闭域验证







5.12. 上传文件时Tomcat崩溃 相关讨论：
http://kakatian1.blog.51cto.com/4728533/841913 http://bbs.csdn.net/topics/300021027

6. 安全性

6.1. 第三方是否可通过此控件获取用户电脑上的文件内容 答：不能。因为现在控件只提供了两种信息：1，文件路径。2，文件大小。

6.2. 第三方是否可通过此控件获取用户硬盘上的数据？ 第三方不能通过此控件获取用户硬盘上的数据。因为我们会在控件内部增加域名授权信息，例如：假设我们对 www.qq.com 授权，第三方拿到这个控件后，向 www.163.com 上传数据，这时会失败，因为控件内部会判断 www.163.com 是否经过授权。只有经过授权的地址控件才允许上传数据。