Independent discuz Avatar editing Module

Abstract: In the discuz product series (including ucenter and uchome), The Flash Avatar upload and editing function is relatively easy to use, which is similar to the online photo editing plug-in implemented by Js, so I want to separate it. On the one hand, I can study it, and on the other hand, I have the opportunity to use it in projects (here I mainly refer to ASP. netProgramPHP ).

Main content:

1. Copyright Notice
2. How profile pictures are uploaded and edited
3. Independent Avatar upload and editing Module

I. Copyright Notice

Because the core of this module is discuz nt, according to the relevant provisions :"DisableDiscuz! /UcenterAny derived version, modified version, or third-party version used for redistribution."
Therefore, before starting the following content, the statement is as follows:

This program is only for personal study, not for the purpose of profit, if the interests of others, please send an email KenshinCui@hotmail.com to contact the author, I get notice immediately delete the relevant content, other third-party Downloaders or users shall note that their content is copyrighted by Beijing kangsheng xinxin Technology Co., Ltd. All.

Ii. Principles of avatar upload and editing

Tracking file, so to understand its principle, you must track the relevant interface calls.

Before that, we need to first understand the flash page in discuz.CodeIs dynamically generated through document. Write, and the output string is through calling the js method ac_fl_runcontent () (this method is in common. JS ). It mainly generates HTML layout code for related falsh. The structure is roughly as follows:

 <  Object  Width  = "540"  Height  = "253"  ID = "Mycamera"  Name  = "Mycamera"  Classid  = "CLSID: d27cdb6e-ae6d-11cf-96b8-444553540000"     >  
  <  Param  Name  = "Scale"  Value  = "Exactfit"     />  
  <  Param  Name  = "Movie"  Value  = "/Images/common/camera.swf? Nt = 1 & inajax = 1 & appid = signature & input = jv5bq48ikf4 = & ucapi = http % 3A % 2f % 2fkenshincui-pc % 3a305% 2 ftools % 2fajax. aspx"     />   
  <  Param  Name  = "Quality" Value  = "High"     />   
  <  Param  Name  = "Bgcolor"  Value  = "# Ffffff"     />   
  <  Param  Name = "Wmode"  Value  = "Transparent"     />   
  <  Param  Name  = "Menu"  Value  = "False"     />   
  <  Param Name  = "Swliveconnect"  Value  = "True"     />   
  <  Param  Name  = "AllowScriptAccess"  Value  = "Always"     />   
  </ Object  >   

In the above Code, the most important parameter is the movie parameter, which defines the avatar name, cropping upload API path, and Flash path.

With this information, we only need to know the interface to call. In this case, we can enable fiddler for tracking:

When I first arrived at the Avatar modification page, I accessed/Images/common/camera.swf? Nt = 1 & inajax = 1 & appid = signature & input = dcdsbxia4ry = & ucapi = http % 3A % 2f % 2f192. 168.1.92% 3a312% 2 ftools % 2fajax. aspx

This is the value of the movie parameter we mentioned above. Because information such as input (which we will find later is the name of the Avatar image) needs to be dynamically set, therefore, the discuz design adopts the dynamic JS generation method.

Next we upload a photo:

You can see the access path from the trail/Tools/ajax. aspx? M = user & inajax = 1 & A = uploadavatar & appid = 1036681732c9187901d4693bf1ab8416 & input = dcdsbxia4ry % 3d & agent = NULL & avatartype = NULLIt is mainly responsible for processing photo uploads. The a parameter tells Ajax. aspx what operations to perform (in fact, we will find that A isUploadavatar performs the upload operation.),The input parameter is the same as the preceding one. It is the name of the Avatar image.

Then we perform cropping:

From Fiddler, we can see that the Request Path is/Tools/ajax. aspx? M = user & inajax = 1 & A = rectavatar & appid = 1036681732c9187901d4693bf1ab8416 & input = dcdsbxia4ry % 3d & agent = NULL & avatartype = NULLThis is the result that the parameter is changedRectavatar. The other information is basically the same as the previous operation. After analysis, we can see that this step corresponds to the cropping and saving operation.

With the above analysis, we can understand the general principle of the entire Avatar upload and editing function in discuz. We found that the main part of code implementation is Ajax. ASPX page, so we can open this page and modify it to remove things unrelated to discuz's own business, forming an independent small component.

3. Independent Avatar upload and editing Module

With the above analysis, it is not difficult to upload the module independently. First, we can remove Ajax. aspx from its specific business-related code, retain the upload and save operations, and design its path as configurable. Second, we can change the way to dynamically generate flash layout code to static, because other parameters are not important for us, and the important thing is to save the image name, in this process, we can set the network path to be dynamically obtained (the original discuz is set to dead after installation ). Finally, we can copy the relevant FLASH file to the project. In addition, the .swf file also contains the locale. xml used by the Multi-Country reason package and the local cross-domain file crossdomain. xml.

Okay. Let's take a look at how to use the independent modules.

The directory structure of the independent Avatar editing module is as follows:

Put the scripts, JS directories, and images directories in the site root directory, and add the following configuration in Web. config:

 <  Add  Key  = "ImagePath"  Value  = "Images"  /> <! --  Relative Path for storing images  -->  
  <  Add  Key  = "Tempfilepath"  Value  = "Images/upload"  />  <! --  Path of the uploaded temporary file  -->  
  <  Add Key  = "Imagesize"  Value  = "All"  />  <! --  The image size. Three types are supported: large, medium, and small.  --> 

Of course, the image path, that is, the generated photo path, can be modified as needed.

You only need to call setphotoname () in photoedit. js to pass the image name (you can set the flash storage path and Ajax. aspx address through the last two parameters ):

<Script Type="Text/JavaScript"Language="Javascript">
Setphotoname ("Yukoogura");
</SCRIPT>
 

In addition, the setphotoname () method has two optional parameters: the path of the Flash file and the Ajax. aspx path for processing upload and cropping. In other words, these two paths can also be freely stored.

Next, let's take a look at the actual effect (uploading and editing a photo using the "take a photo" method is similar, so it is no longer needed ):

Upload a photo:

Perform the cropping operation:

Three types of images are generated after cropping:

OK. Let's go here today! Module download:

BenWorksUse the Knowledge Sharing signature 2.5 mainland China License Agreement for licensing. You are welcome to reprint, interpret, or use it for commercial purposes. However, please indicate that the record is from Cui jiangtao (kenshincui) and contains related links.