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:
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: