美图WEB开放平台环境配置

平台环境配置

1.1、设置crossdomain.xml

下载crossdomain.xml文件，把解压出来的crossdomain.xml文件放在您保存图片或图片来源的服务器根目录下，
比如： http://example.com.cn，那么crossdomain.xml的路径为：http://example.com.cn/crossdomain.xml。
需要注意的是crossdomain.xml必须部署于站点根目录下才有效， crossdomain.xml的目的是授权来自美图域下的flash向您的站点上传图片或者从您的站点加载图片。
【备注】由于本地测试会被flash安全沙箱拦住，请自行搭建web服务器，在web 环境中测试。

1.2、调用方法

1.2.1、引用JS代码

在你的网页代码head标签里或者body标签里加入代码。

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

1.2.2、使用演示(demo)，快速上手

1.2.3、如需更详尽文档解释，可到开发博客查阅。

2、API列表

2.1、方法

2.1.1、 嵌入SWF（xiuxiu.embedSWF）

功能描述：网页中嵌入美图秀秀的编辑器
语法：

xiuxiu.embedSWF(container,editorType,width,height,id);

示例代码

xiuxiu.embedSWF("altContent", 3, 800, "100%","lite");

2.1.2、 加载图片（xiuxiu.loadPhoto）

功能描述：编辑器载入图片
语法：

xiuxiu.loadPhoto(images,base64,id);

示例代码

单张图片：
xiuxiu.loadPhoto("http://open.web.meitu.com/sources/images/1.jpg");
单张base64的图片(demo)：
xiuxiu.loadPhoto("/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja…", true);
多张图片(demo)：
xiuxiu.loadPhoto(["http://open.web.meitu.com/sources/images/1.jpg"]);
多张base64的图片：
xiuxiu.loadPhoto(["/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja…"], true);

2.1.3、上传URL（xiuxiu.setUploadURL）

功能描述：设置上传接口地址，接收图片的地址
语法：

xiuxiu.setUploadURL (url,id);

示例代码

xiuxiu.setUploadURL("http://web.upload.meitu.com/image_upload.php"); //修改为您自己的上传接收图片程序

2.1.4、设置参数（xiuxiu.setUploadArgs）

功能描述：设置上传参数（如无需上传参数可不调用）
语法：

xiuxiu.setUploadArgs (args,id);

示例代码

xiuxiu.setUploadArgs({a:1, b:"lucky"});

2.1.5、设置上传类型（xiuxiu.setUploadType）

功能描述：设置上传方式（以下流式和表单上传都是POST请求方式）
语法：

xiuxiu.setUploadType (uploadType,id);

示例代码

xiuxiu.setUploadType(2);

备注：美图秀秀提供两个上传接口供测试
一个是octet-stream方式上传，地址为：http://imgkaka.meitu.com/xiuxiu_web_pic_save.php
另一个是multipart/form-data方式上传，地址为：http://web.upload.meitu.com/image_upload.php
表单名称为"upload_file"。

2.1.6、设置表单名称（xiuxiu.setUploadDataFieldName）

功能描述：设置在上载 POST 操作中位于文件数据之前的字段名
也就是对应于设置html<input type="file" name="Filedata" id="file" />中的name
语法：

xiuxiu.setUploadDataFieldName (uploadDataFieldName,id);

示例代码

xiuxiu.setUploadDataFieldName("Filedata");

如果以上事件还不能满足您的需求，请查看高级方法。
点击显示高级方法

2.2、事件

2.2.1、初始化（xiuxiu.onInit）

xiuxiu.onInit = function(id) {}

当编辑器初始化完成时调用，必须定义一个在调用事件处理函数时执行的函数。

示例代码

xiuxiu.onInit = function (id)
{
	// your code here
	alert("flash初始化完成");
}

2.2.2、图片上传前（xiuxiu.onBeforeUpload）

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

在图片上传前调用，提供上传前最后一个机会来改变上传数据甚至终止上传，如果需要终止上传，只要返回false，需要继续上传则返回true；同时data参数为object类型，包含要上传的图片的属性，如宽度、高度、文件名、字节数等。

参数
data：要上传的图片的属性（object类型，下表为data包含的属性）

参数
id：调度此事件的编辑器在页面中的id

适用场景：
1.论坛上传图片最大为2M，因此可在上传前检查图片大小，超过则进行提示不再上传。(demo)

示例代码

xiuxiu.onBeforeUpload = function (data, id)
{
  var size = data.size;
  if(size > 2 * 1024 * 1024)
  {
    alert("图片不能超过2M");
    return false;
  }
  return true;
}

2.图片上传前重新更新上传参数(demo)

示例代码

xiuxiu.setUploadArgs({c:1, d:"test" }, id);
xiuxiu.onBeforeUpload = function (data, id)
{
  xiuxiu.setUploadArgs({c:1111, d:"goodluck" }, id);
  return true;
}

2.2.3、上传响应（xiuxiu.onUploadResponse）

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

当上传图片后端响应时调用，必须定义一个在调用事件处理函数时执行的函数。

参数
data：服务器端返回的数据
id：调度此事件的编辑器在页面中的id

示例代码

xiuxiu.onUploadResponse = function (data)
{
	alert("上传响应" + data);
}

2.2.4、关闭编辑器（xiuxiu.onClose）

xiuxiu.onClose = function(id) {}

当在flash中点击关闭按钮时调用，必须定义一个在调用事件处理函数时执行的函数。

参数
id：调度此事件的编辑器在页面中的id

示例代码

xiuxiu.onClose = function (id)
{
	alert("编辑器关闭");
}

2.2.5、调试编辑器（xiuxiu.onDebug）

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

当发生错误时输出的调试信息，必须定义一个在调用事件处理函数时执行的函数。

参数
data：调试信息
id：调度此事件的编辑器在页面中的id

示例代码

xiuxiu.onDebug = function (data)
{
	alert("错误响应" + data);
}

错误代码及其意义

如果以上事件还不能满足您的需求，请查看高级事件。
点击隐藏高级事件

2.2.6、高级事件

2.2.6.1、点击打开图片按钮（xiuxiu.onBrowse）

xiuxiu.onBrowse= function(channel, multipleSelection, canClose, id) {}

当取消默认打开行为后，在flash中点击打开图片按钮时调用。必须定义一个在调用事件处理函数时执行的函数。 当您的网站有相册系统时，需要点击打开图片按钮的时候，可以弹出自定义的照片选择器来从中选取照片，这时候这个事件就非常有用。需要注意的是必须取消默认打开行为，即xiuxiu.setLaunchVars("preventBrowseDefault", 1);(demo)

参数
channel：编辑器中调度此事件的来源
multipleSelection：是否可多选
canClose：自定义文件浏览对话框能否关闭
id：调度此事件的编辑器在页面中的id

示例代码

xiuxiu.onBrowse = function (channel, multipleSelection, canClose, id)
        	{
        		alert("打开自定义照片选择器");
        	}

2.2.6.2、保存为base64图片触发时（xiuxiu.onSaveBase64Image）

xiuxiu.onSaveBase64Image= function(data, fileName, fileType, id) {}

当文件不进行流式或者表单形式上传，而是进行Base64编码后传给JS使用时调用。必须定义一个在调用事件处理函数时执行的函数。 当您的网站使用编辑器处理完照片后需要把这张图片传给其他程序来做后续处理，而又不想重复上传，这时候这个事件就非常有用。需要注意的是需要设置上传类型为3，即xiuxiu.setUploadType(3);(demo)

参数
data：Base64编码的图片
filename：文件名
fileType：文件格式
id：调度此事件的编辑器在页面中的id

示例代码

xiuxiu.onSaveBase64Image= function (data, fileName, fileType, id)
        	{
        		alert("保存Base64编码的图片");
        	}

2.2.6.3、点击上传按钮（xiuxiu.onUpload）

xiuxiu.onUpload = function(id) {}

当取消默认上传行为后，在flash中点击上传按钮时调用。必须定义一个在调用事件处理函数时执行的函数。 当需要在保存前中断，然后弹出文件浏览对话框让用户选择要保存的地方或者让用户做其他自定义操作，这时候这个事件就非常有用。需要注意的是必须取消默认上传行为，即xiuxiu.setLaunchVars("preventUploadDefault", 1);，用户操作完之后，调用xiuxiu.upload();继续上传(demo)。

2.2.6.4、批量上传过程中，当前图片上传响应时（xiuxiu.onBatchUploadResponse）

xiuxiu.onBatchUploadResponse = function (data, index, id) {}

批量上传过程中，每一张图片上传后都会调度此事件一次。
必要时你可以对此事件进行处理，根据参数data决定下面剩余的图片是否继续上传，
如需终止上传，则需返回一个object类型的返回值{"continue":false}，如需继续上传，则返回{"continue":true}，
如果上传成功（缩略图上打钩）则返回{"continue":true,"success":true},同理上传不成功返回{"continue":true,"success":false}(demo)

参数
data：服务器端返回的数据（字符型）
index：当前上传完成的图片的索引
id：调度此事件的编辑器在页面中的id

示例代码

xiuxiu.onBatchUploadResponse = function (data, index, id)
        	{
        		var returnValue = {"continue":true};
                        return returnValue;
        	}

2.2.6.5、批量上传全部完成时（xiuxiu.onBatchUploadComplete）

xiuxiu.onBatchUploadComplete= function(id) {}

图片全部处理并上传完成时调度此事件。必要时你可以对此事件进行处理，进行页面跳转或关闭编辑器。

参数
id：调度此事件的编辑器在页面中的id

示例代码

xiuxiu.onBatchUploadComplete= function (id)
        	{
        		//图片全部上传完成，接下去自行处理
        		alert("图片全部上传完成，接下去自行处理");
        	}