asp.net independent discuz Avatar Edit module separate package

Main content:

Copyright notice
The principle of avatar uploading and editing
Independent avatar upload and edit module
I.. copyright NOTICE
Since the core of this module comes from Discuz NT, according to the relevant regulations: "Prohibit in discuz! /ucenter to develop any derivative, modified, or Third-party version for redistribution based on the whole or any part of it. "
So before you start, declare the following:

This procedure is only for individual study, not for the purpose of profit, if infringing the interests of others, Please send a message KenshinCui@hotmail.com contact the author, I was notified immediately after the deletion of the relevant content, other Third-party users or users in the use of attention to its content copyright Beijing Kang Sheng New Technology Co., Ltd.

second, avatar upload and edit the principle
In Discuz, Avatar uploads and edits are done mainly through flash, which deals with the main core work of file uploading and trimming, but we don't have any. fla source files, only. swf files, so you have to track the relevant interface calls to understand their rationale.

Prior to this we need to understand that in Discuz Flash's page code is dynamically generated through document.write, where the output string is by invoking the ac_fl_runcontent () This JS method (this method in Common.js). It mainly generates the HTML layout code of the related Falsh, which is structured as follows:

Copy CodeThe code is as follows:
<object width= "540" height= "253" id= "Mycamera" Name= "Mycamera" CLSID: d27cdb6e-ae6d-11cf-96b8-444553540000 ">
<param name= "scale" value= "Exactfit"/>
<param name= "movie" Value= "/images/common/camera.swf?nt=1&inajax=1&appid= 67111770b37d9fc06c56e691c013b685&input=jv5bq48ikf4=&ucapi=http%3a%2f%2fkenshincui-pc%3a305%2ftools% 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>

The most important thing in the above code is the movie parameter, which defines the avatar name, the Trim upload API path, and the path of the flash.
With this information we only need to understand the interface call interface, then we can open fiddler for tracking:

Visited the/images/common/camera.swf?nt=1&inajax=1&appid=1036681732c9187901d4693bf1ab8416& when it first arrived at the Avatar modification interface Input=dcdsbxia4ry=&ucapi=http%3a%2f%2f192.168.1.92%3a312%2ftools%2fajax.aspx

This is the above we say the value of the movie parameter, as the input (we will find it is the name of the avatar picture) and other information needs are dynamically set, so discuz design when the dynamic generation of JS method.

Then we upload a picture:

Access paths can be seen from trace/tools/ajax.aspx?m=user&inajax=1&a=uploadavatar&appid=1036681732c9187901d4693bf1ab8416 &input=dcdsbxia4ry%3d&agent=null&avatartype=null, it is primarily responsible for handling photo uploads, The A parameter tells Ajax.aspx what to do (in fact, we will find that a is uploadavatar to perform the upload operation), the input parameter is the same as above, is the avatar picture name.

Then we perform the trim:

From the 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=null, This is a parameter changed to Rectavatar, the other information is basically consistent with the previous operation, after analysis we can see that this step corresponds to the trim save operation.

With the above analysis, we can probably understand the whole picture in the Discuz upload and edit function probably principle, We found that in the code implementation part of the main is ajax.aspx this page, so we can open this page to modify it to remove the discuz of their own business, to form a separate group.

Three, independent avatar upload and edit module

With the above analysis, it is not too difficult for us to upload modules independently. First of all, we can separate the ajax.aspx from the specific business-related code, only the upload and save operations, and its path is designed to be configurable. Secondly, we can change the dynamic generation of Flash layout code to static, because for us, the other parameters are not important, the important thing is the image save name, this process we can be processed to set its network path to be dynamically acquired (the original discuz is installed after the installation of dead). Finally, we'll copy Flash's related files to the project, except for the. swf file, which is also a multinational locale.xml, and a local cross-domain file crossdomain.xml.

OK, so many of the following to see how our independent module to use it.

First this independent avatar editing module directory structure is as follows:

Use only copy of PhotoEditor.dll in bin to the site Bin directory, crossdomin.js, ajax.aspx, photoedit.htm, Js directory, images directory into the site root directory, Then add the following configuration to Web.config:
Copy Code code as follows:
<add key= "ImagePath" value= "Images"/><!--the relative path of the picture to be stored-->
<add key = "TempFilePath" value= "Images/upload"/><!--uploaded temporary file path-->
<add key= "ImageSize" value= "All"/><!--picture size, support three kinds, respectively, large, medium, small, if you use three kinds of configuration for all-->

Of course, the picture path is the resulting photo path can be modified according to the situation.
In use, you only need to call Setphotoname () in Photoedit.js () to pass the name of the picture (you can set the Flash storage path and the ajax.aspx address via the latter two parameters):
Copy Code code as follows:
<script type= "Text/javascript" language= "JavaScript" >
Setphotoname ("Yukoogura");
</script>

In addition Setphotoname () method also has two optional parameters, that is the path of the Flash file and processing upload and cut ajax.aspx path, in other words, these two paths can also be put.

Take a look at the actual effect (through the "take photos" of the way to upload and edit photos of the screenshot is more similar to no longer screenshots):

Upload a Picture:

To perform the trim operation:

To produce three dimensions of a picture after trimming:

Package download