首页 > 编程 > .NET > 正文

asp.net 独立Discuz头像编辑模块分离打包

2024-07-10 13:25:03
字体:
来源:转载
供稿:网友
主要内容:

版权声明
头像上传和编辑的原理
独立头像上传及编辑模块
一、版权声明
由于此模块核心均来自于Discuz NT,根据相关规定:"禁止在 Discuz! / UCenter 的整体或任何部分基础上以发展任何派生版本、修改版本或第三方版本用于重新分发。"
因此在开始下面的内容之前声明如下:

本程序仅为个人学习研究,不以营利为目的,如若侵犯他人利益,请发送邮件KenshinCui@hotmail.com联系作者,本人获得通知后立即删除相关内容,其他第三方下载者或使用者在使用时注意其内容版权归北京康盛新创科技有限责任公司 所有。

二、头像上传和编辑的原理
在Discuz中头像上传和编辑主要通过flash来完成,它处理了包括文件上传和裁切的主要核心工作,但是我们这里没有.fla源文件,只有.swf文件,所以要弄清其原理就必须跟踪相关的接口调用。

在此之前我们首先需要了解在Discuz中flash的页面代码是通过document.write动态生成的,其中的输出的字符串是通过调用AC_FL_RunContent()这个js方法(这个方法在common.js中)。它主要是生成相关falsh的html布局代码,结构大致如下:

复制代码 代码如下:


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" >
<param value="exactfit" />
<param value="/images/common/camera.swf?nt=1&inajax=1&appid=67111770b37d9fc06c56e691c013b685&input=Jv5BQ48IKF4=&ucapi=http%3a%2f%2fkenshincui-pc%3a305%2ftools%2fajax.aspx" />
<param value="high" />
<param value="#ffffff" />
<param value="transparent" />
<param value="false" />
<param value="true" />
<param value="always" />
</object>


在上面的代码中最重要的就是movie参数,它定义了头像名称、裁切上传api路径以及flash所在路径等。
有了这些信息之后我们只需要了解相关接口调用接口,这时我们可以打开fiddler进行跟踪:

asp.net 独立Discuz头像编辑模块分离打包<add key ="TempFilePath" value="images/upload"/><!--上传的临时文件路径-->
<add key="ImageSize" value="all"/><!--图片大小,支持三种,分别是large、medium、small,如果使用三种则配置为all-->


当然其中的图片路径即生成的照片路径都可以根据情况修改的。
在使用过程中只需要调用photoEdit.js中的SetPhotoName()传递图片名称即可(可以通过后两个参数设置flash存放路径和Ajax.aspx地址):

复制代码 代码如下:


<script type="text/javascript" language="javascript">
SetPhotoName("YukoOgura");
</script>


另外SetPhotoName()方法还有两个可选参数,那就是flash文件的路径和处理上传和裁切的Ajax.aspx路径,换句话说这两个路径也是可以随意放的。

下面看看实际效果(通过"拍摄照片"的方式上传和编辑照片的截图比较类似就不再截图了):

上传一张照片:

asp.net 独立Discuz头像编辑模块分离打包

执行裁切操作:

asp.net 独立Discuz头像编辑模块分离打包

裁切后生成三种尺寸的图片:

asp.net 独立Discuz头像编辑模块分离打包

打包下载

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表