Beautiful Web open Platform environment configuration

Platform Environment configuration 1.1, setting Crossdomain.xml

Download the Crossdomain.xml file and place the extracted crossdomain.xml file in the root of the server where you saved the image or image.
For example: http://example.com.cn, then the path of Crossdomain.xml is: Http://example.com.cn/crossdomain.xml.
It is important to note that Crossdomain.xml must be deployed at the site root to be effective, crossdomain.xml is to authorize flash from the US domain to upload pictures to your site or load images from your site.
Note Because local tests are blocked by the Flash security sandbox, build your own Web server and test it in a Web environment.

1.2, call method 1.2.1, reference JS code

Add code to your Web page code head tag or the body tag.

<script src= "Http://open.web.meitu.com/sources/xiuxiu.js" type= "Text/javascript" ></script>

1.2.2, use Demo (demo), quick to get started 1.2.3, if need more detailed document explanation, can go to Development blog review. 2, API list 2.1, method 2.1.1, Embed SwF(xiuxiu.embedswf)

Function Description: Embed beauty 美图秀秀 Editor in webpage
Grammar:

XIUXIU.EMBEDSWF (Container,editortype,width,height,id);

Parameters	must-Choose	field Type	Description
Container	Is	String	The ID of the container to be replaced by flash
EditorType	Whether	Int	Editor type to embed (1 for lightweight editing, 2 for lightweight puzzle, 3 for full, 5 for Avatar Editor, default of 1)
Width	Whether	String	Editor width (can be a number or percentage, for lightweight editing and full version)
Height	Whether	String	Editor height (can be a number or percentage, for lightweight editing and full version)
Id	Whether	String	The editor's ID in the page, the default value is "Xiuxiueditor" (when you need to embed more than one editor within the same page) Need to be distinguished by different IDs, this is useful, in the next few interfaces can be called by different ID Interface with the editor (demo))

Sample code

xiuxiu.embedswf ("Altcontent", 3, +, "100%", "lite");

2.1.2, Loading Pictures(Xiuxiu.loadphoto)

Function Description: Editor loading picture
Grammar:

Xiuxiu.loadphoto (Images,base64,id);

Parameters	must-Choose	field Type	Description
Images	Is	String or array	Load a picture in the editor, type can be a string or an array, which means you can load one or more pictures at the same time (Note that 1. If it is an array, the elements in the array must be the same type of picture, or both are Base64 Type, or url;2. If it is a base64 picture, you need to remove a few first characters, only the pure picture data, e.g. remove "data:image/jpeg;base64,")
Base64	Whether	Boolean	Is the base64 picture, the default value is False
Id	Whether	String	The ID of the editor in the page, the default value is "Xiuxiueditor"

Sample code

Single Picture: Xiuxiu.loadphoto ("Http://open.web.meitu.com/sources/images/1.jpg"), base64 picture of single Sheet (demo): Xiuxiu.loadphoto ("/ 9j/4aaqskzjrgabagaazabkaad/7aarrhvja ... ", true); Multiple pictures (Demo): Xiuxiu.loadphoto (["http://open.web.meitu.com/sources/images/1.jpg"]); pictures of multiple Base64: Xiuxiu.loadphoto ([ "/9j/4aaqskzjrgabagaazabkaad/7aarrhvja ..."], true);

2.1.3, Upload URL(Xiuxiu.setuploadurl)

Function Description: Set the Upload interface address, receive the image address
Grammar:

Xiuxiu.setuploadurl (Url,id);

Parameters	must-Choose	field Type	Description
Url	Is	String	Set the Upload interface address (must be an absolute path)
Id	Whether	String	The ID of the editor in the page, the default value is "Xiuxiueditor"

Sample code

Xiuxiu.setuploadurl ("http://web.upload.meitu.com/image_upload.php"); Modify the Receive picture program for your own upload

2.1.4, Setting Parameters(Xiuxiu.setuploadargs)

Function Description: Set the upload parameters (if no upload parameters are not called)
Grammar:

Xiuxiu.setuploadargs (Args,id);

Parameters	must-Choose	field Type	Description
Args	Is	Object	Set Upload Parameters
Id	Whether	String	The ID of the editor in the page, the default value is "Xiuxiueditor"

Sample code

Xiuxiu.setuploadargs ({a:1, B: "Lucky"});

2.1.5, Set Upload type(Xiuxiu.setuploadtype)

Function Description: Set upload mode (the following streaming and form upload are POST request mode)
Grammar:

Xiuxiu.setuploadtype (Uploadtype,id);

Parameters	must-Choose	field Type	Description
Uploadtype	Is	Int	Set upload mode 1. Streaming Upload (demo) Content-type:application/octet-stream; 2. Standard form upload (demo) Content-type:multipart/form-data; 3, for encoding into Base64 to JS, detailed can see the following Xiuxiu.onsavebase64image event (demo) The default upload mode is streaming upload, only upload mode for the form upload to call this function The receive code about Octet-stream upload method can be found in Http://www.5iphp.com/php-input For multipart/form-data upload mode of the receive code can refer to the http://www.w3school.com.cn/php/php_file_upload.aspphp example can refer to streaming upload or standard form upload; C # example can refer to streaming upload or standard form upload; JSP examples can be referenced by streaming uploads or standard form uploads.
Id	Whether	String	The ID of the editor in the page, the default value is "Xiuxiueditor"

Sample code

Xiuxiu.setuploadtype (2);

Note: Mei 美图秀秀 provides two upload interface for testing
One is the octet-stream way to upload, the address is: http://imgkaka.meitu.com/xiuxiu_web_pic_save.php
The other is multipart/form-data way to upload, the address is: http://web.upload.meitu.com/image_upload.php
Table sole name is called "Upload_file".

2.1.6, set the form name(Xiuxiu.setuploaddatafieldname)

Function Description: Sets the name of the field before the file data in the upload POST operation
That is, the name corresponding to the setting html<input type= "file" Name= "Filedata" id= "file"/>
Grammar:

Xiuxiu.setuploaddatafieldname (Uploaddatafieldname,id);

Parameters	must-Choose	field Type	Description
Uploaddatafieldname	Is	String	Only valid for form uploads (call this function if you use form uploads and the field name is not "Filedata")
Id	Whether	String	The ID of the editor in the page, the default value is "Xiuxiueditor"

Sample code

Xiuxiu.setuploaddatafieldname ("Filedata");

If the above events do not meet your needs, please review the advanced methods.
Click Show Advanced Methods

2.2, event 2.2.1, Initialize(Xiuxiu.oninit)

Xiuxiu.oninit = function (id) {}

When the editor initialization is complete, you must define a function that executes when the event handler function is called.

Parameters	Description
Id	The ID of the editor that dispatched this event in the page

Sample code

Xiuxiu.oninit = function (ID) {//Your code Herealert ("Flash initialization Complete");}

2.2.2, before uploading pictures(Xiuxiu.onbeforeupload)

Xiuxiu.onbeforeupload = function (data, id) {}

Call before the image upload, provide the last opportunity before uploading to change the upload data or even terminate the upload, if you need to terminate the upload, as long as the return false, you need to continue to upload the return true, and the data parameter is the object type, contains the properties of the picture to be uploaded, such as width, height, file name, Number of bytes, and so on.

Parameters
Data: The attributes of the picture to be uploaded (object type, the following table is the property contained in data)

Properties	field Type	Description
Width	Int	Picture width
Height	Int	Picture height
Type	String	Format (currently only JPG, PNG, GIF) three kinds
Size	Int	Number of picture bytes
Name	String	Picture name
Numoperate	Int	The first few pictures to edit after opening the editor
Isnet	Booleam	Whether it is a network picture
Url	String	If it is a network picture, it is the picture URL, otherwise it is empty

Parameters
ID: The ID of the editor that dispatched this event in the page

Applicable scenarios:
1. The upload image of the forum is up to 2M, so you can check the image size before uploading, and then do not upload it. (demo)

Sample code

Xiuxiu.onbeforeupload = function (data, id) {  var size = data.size;  if (Size > 2 * 1024x768 * 1024x768)  {     alert ("Image cannot exceed 2M");     return false;   }  return true; }

2. Re-update the upload parameters before uploading the image (demo)

Sample code

Xiuxiu.setuploadargs ({c:1, D: "Test"}, id), xiuxiu.onbeforeupload = function (data, id) {  xiuxiu.setuploadargs ({C : 1111, D: "Goodluck"}, id);  return true;}

2.2.3, Upload Response(Xiuxiu.onuploadresponse)

xiuxiu.onuploadresponse= function (data,id) {}

When you upload a picture back-end response, you must define a function that executes when the event handler function is called.

Parameters
Data: Returned by the server side
ID: The ID of the editor that dispatched this event in the page

Sample code

Xiuxiu.onuploadresponse = function (data) {alert ("Upload response" + data);}

2.2.4, Close Editor(Xiuxiu.onclose)

Xiuxiu.onclose = function (id) {}

Called when the Close button is clicked in Flash, you must define a function that executes when the event handler is called.

Parameters
ID: The ID of the editor that dispatched this event in the page

Sample code

Xiuxiu.onclose = function (ID) {alert ("editor off");}

2.2.5, Debug Editor(Xiuxiu.ondebug)

xiuxiu.onDebug= function(data,id) {}

When debugging information is output when an error occurs, you must define a function that executes when the event handler function is called.

Parameters
Data: Debug Information
ID: The ID of the editor that dispatched this event in the page

Sample code

Xiuxiu.ondebug = function (data) {alert ("error response" + data);}

Error codes and their meanings

Error code	Description
MT0001	Upload interface does not exist (404)
MT0002	Your server does not have a crossdomain.xml, Or the crossdomain.xml contains no <allow-access-from domain= "*.meitu.com"/> See how Crossdomain.xml is set
MT0003	Upload Interface not set

If the above events do not meet your needs, please review the advanced events.
Click to hide Advanced events

2.2.6, Advanced Events2.2.6.1, Click the Open Picture button(Xiuxiu.onbrowse)

xiuxiu.onbrowse= function (channel, multipleselection, Canclose, id) {}

Called when the Open Picture button is clicked in Flash when the default open behavior is canceled. You must define a function that executes when the event handler function is called. This event is useful when you have a photo album system on your site and you need to click the Open Image button to play a custom photo selector to select a picture from. It is important to note that the default open behavior must be canceled, i.e. Xiuxiu.setlaunchvars ("Preventbrowsedefault", 1);(d emo)

Parameters
Channel: Dispatches the source of this event in the editor
Multipleselection: Can I select multiple
Canclose: Can the custom file Browse dialog box close
ID: The ID of the editor that dispatched this event in the page

Sample code

Xiuxiu.onbrowse = function (channel, multipleselection, Canclose, id)        {        alert ("Open custom Photo Picker");        

2.2.6.2, Save As Base64 when the picture is triggered(Xiuxiu.onsavebase64image)

xiuxiu.onsavebase64image= function (data, fileName, FileType, id) {}

When a file is not streamed or forms are transmitted in form, it is Base64 encoded and passed to JS for use. You must define a function that executes when the event handler function is called. This event is useful when your site uses the editor to process photos and then pass the image on to other programs for subsequent processing, rather than repeating the upload. Note that you need to set the upload type to 3, i.e. Xiuxiu.setuploadtype (3);(d emo)

Parameters
DATA:BASE64 encoded pictures
FileName: File name
FileType: File format
ID: The ID of the editor that dispatched this event in the page

Sample code

xiuxiu.onsavebase64image= function (data, fileName, FileType, id)        {        alert ("Save Base64 encoded Picture");        }

2.2.6.3, Click the upload button(Xiuxiu.onupload)

Xiuxiu.onupload = function (id) {}

Called when the Upload button is clicked in Flash when the default upload behavior is canceled. You must define a function that executes when the event handler function is called. This event is useful when you need to break before saving and then pop up the file Browse dialog box to let the user choose where to save or let the user do other custom actions. Note that the default upload behavior must be canceled, that is, Xiuxiu.setlaunchvars ("Preventuploaddefault", 1), after the user has finished the operation, call Xiuxiu.upload (); Continue uploading (demo).

2.2.6.4, Bulk upload process, the current picture upload response time(Xiuxiu.onbatchuploadresponse)

Xiuxiu.onbatchuploadresponse = function (data, index, ID) {}

During the bulk upload process, this event is dispatched once each picture is uploaded.
If necessary, you can handle this event, depending on the parameter data to determine whether the remaining images below continue to upload,
To terminate the upload, return the return value of an object type {"Continue": false} and return {"Continue": true} if you want to continue uploading.
If upload succeeds (tick on thumbnail) return {"Continue": true, "Success": true}, same as upload unsuccessful return {"Continue": true, "Success": false} (Demo)

Parameters
Data: Server-side return (character type)
Index: The indexes of the currently uploaded pictures
ID: The ID of the editor that dispatched this event in the page

Sample code

Xiuxiu.onbatchuploadresponse = function (data, index, ID)        {        var returnvalue = {"Continue": true};                        return returnvalue;        }

2.2.6.5, when the bulk upload is complete(Xiuxiu.onbatchuploadcomplete)

xiuxiu.onbatchuploadcomplete= function (ID) {}

This event is dispatched when the picture is processed and the upload is complete. If necessary, you can process this event, make a page jump, or close the editor.

Parameters
ID: The ID of the editor that dispatched this event in the page

Sample code

xiuxiu.onbatchuploadcomplete= function (ID)        {        //Picture upload complete, and then handle the alert on its own        ("Picture all upload completed, then proceed to self-processing");        }

Beautiful Web open Platform environment configuration