美图秀秀 web开发图片编辑器
美图秀秀web开发平台 http://open.web.meitu.com/wiki/
1、环境配置
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>
2、API列表
2.1、方法
2.1.1、 嵌入SWF（xiuxiu.embedSWF）
功能描述：网页中嵌入美图秀秀的编辑器
语法：
xiuxiu.embedSWF(container,editorType,width,height,id);
| 参数 | 必选 | 字段类型 | 说明 |
|---|---|---|---|
| container | 是 | string | 要被flash替换的容器的id |
| editorType | 否 | int | 要嵌入的编辑器类型（1为轻量编辑，2为轻量拼图，3为完整版，5为头像编辑器，默认值1） |
| width | 否 | string | 编辑器宽度（可以为数字或者百分比，对轻量编辑和完整版有效） |
| height | 否 | string | 编辑器高度（可以为数字或者百分比，对轻量编辑和完整版有效） |
| id | 否 | string | 编辑器在页面中的id，默认值为" xiuxiuEditor"（当需要在同一个页面内嵌入一个以上编辑器 时需要以不同的id来区分，这时候就很有用，在接下去的几个接口中便可通过不同的id调用不 同编辑器的接口(demo)） |
示例代码
xiuxiu.embedSWF("altContent", 3, 800, "100%","lite");2.1.2、 加载图片（xiuxiu.loadPhoto）
功能描述：编辑器载入图片
语法：
xiuxiu.loadPhoto(images,base64,id);
| 参数 | 必选 | 字段类型 | 说明 |
|---|---|---|---|
| images | 是 | string或者array | 在编辑器中载入图片，类型可以为字符串或数组，也就是说可以同时载入一张到多张图片 （需要注意的是，1.如果是数组，数组中元素必须是同一类型图片，要么都是base64 类型的，要么是url；2.如果是base64图片，需要去掉几个头字符，只保留纯图片数据， 例如去掉" data:image/jpeg;base64,"） |
| base64 | 否 | boolean | 是否是base64图片，默认值为false |
| id | 否 | string | 编辑器在页面中的id，默认值为" xiuxiuEditor" |
示例代码
单张图片： 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);
| 参数 | 必选 | 字段类型 | 说明 |
|---|---|---|---|
| url | 是 | string | 设置上传接口地址（必须为绝对路径） |
| id | 否 | string | 编辑器在页面中的id，默认值为" xiuxiuEditor" |
示例代码
xiuxiu.setUploadURL("http://web.upload.meitu.com/image_upload.php"); //修改为您自己的上传接收图片程序2.1.4、设置参数（xiuxiu.setUploadArgs）
功能描述：设置上传参数（如无需上传参数可不调用）
语法：
xiuxiu.setUploadArgs (args,id);
| 参数 | 必选 | 字段类型 | 说明 |
|---|---|---|---|
| args | 是 | object | 设置上传参数 |
| id | 否 | string | 编辑器在页面中的id，默认值为" xiuxiuEditor" |
示例代码
xiuxiu.setUploadArgs({a:1, b:"lucky"});2.1.5、设置上传类型（xiuxiu.setUploadType）
功能描述：设置上传方式（以下流式和表单上传都是POST请求方式）
语法：
xiuxiu.setUploadType (uploadType,id);
| 参数 | 必选 | 字段类型 | 说明 |
|---|---|---|---|
| uploadType | 是 | int | 设置上传方式 1、流式上传(demo) Content-type:application/octet-stream； 2、标准表单上传(demo) Content-type:multipart/form-data； 3、为编码成Base64传给JS，详细可参看下文的xiuxiu.onSaveBase64Image事件(demo) 默认上传方式为流式上传，只有上传方式为表单上传才需调用此函数 关于octet-stream上传方式的接收代码可参阅http://www.5iphp.com/php-input 关于multipart/form-data 上传方式的接收代码可参阅http://www.w3school.com.cn/php/php_file_upload.asp |
| id | 否 | string | 编辑器在页面中的id，默认值为" xiuxiuEditor" |
示例代码
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);
| 参数 | 必选 | 字段类型 | 说明 |
|---|---|---|---|
| uploadDataFieldName | 是 | string | 仅对表单上传有效（如果使用表单上传且字段名不为"Filedata"才需调用此函数） |
| id | 否 | string | 编辑器在页面中的id，默认值为" xiuxiuEditor" |
示例代码
xiuxiu.setUploadDataFieldName("Filedata");如果以上事件还不能满足您的需求，请查看高级方法。
点击显示高级方法
2.2、事件
2.2.1、初始化（xiuxiu.onInit）
xiuxiu.onInit = function(id) {}当编辑器初始化完成时调用，必须定义一个在调用事件处理函数时执行的函数。
| 参数 | 说明 |
|---|---|
| id | 调度此事件的编辑器在页面中的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包含的属性）
| 属性 | 字段类型 | 说明 |
|---|---|---|
| width | int | 图片宽度 |
| height | int | 图片高度 |
| type | string | 格式（目前只有jpg、png、gif）三种 |
| size | int | 图片字节数 |
| name | string | 图片名称 |
| numOperate | int | 打开编辑器之后编辑的第几张图片 |
| isNet | booleam | 是否是网络图片 |
| url | string | 如果是网络图片，则为图片url，否则为空 |
参数
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); }错误代码及其意义
| 错误代码 | 描述 |
|---|---|
| MT0001 | 上传接口不存在(404) |
| MT0002 | 您的服务器没有crossdomain.xml， 或者crossdomain.xml内未含有<allow-access-from domain="*.meitu.com"/> 查看crossdomain.xml如何设置 |
| MT0003 | 上传接口未设置 |
配置虚拟域名: meituxiuxiu.gov.cn
html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>美图秀秀开放平台</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<meta name="description" content="美图WEB开放平台是国内首个图片处理工具类型的开放平台，为了助力各大网站发展，美图秀秀在线功能全部免费开放！包括美图秀秀完整版（集美化图片、人像美容及拼图功能为一体）、美图秀秀美化图片、美图秀秀拼图。开发者可以同时使用三款插件，也可以任意选择一款插件使用。" />
<meta name="keywords" content="美图秀秀网页版,开放平台,开放api,开放接口,在线图片处理,图片处理接口,flash">
<script src="http://open.web.meitu.com/sources/xiuxiu.js" type="text/javascript"></script>
<script type="text/javascript">
//如果指定id，则参数归各编辑所属(如下例中设置两个编辑器的上传按钮的不同文字标签)
xiuxiu.setLaunchVars("uploadBtnLabel", "保存", "lite");
xiuxiu.setLaunchVars("uploadBtnLabel", "上传", "collage");
//如果未指定id，则参数为所有编辑器共有(如下例中设置两个编辑器都是繁体中文)
xiuxiu.setLaunchVars("language", "zh_tw");
xiuxiu.embedSWF("altContent1", 5, 640, 440, "lite");
xiuxiu.embedSWF("altContent2", 2, 500, 400, "collage");
xiuxiu.onInit = function (id)
{
if(id == "lite")
{
//xiuxiu.loadPhoto("http://open.web.meitu.com/sources/images/1.jpg", false, id);
xiuxiu.loadPhoto("http://meituxiuxiu.gov.cn/55966738e588d.jpg", false, id);
}
else if(id == "collage")
{
//xiuxiu.loadPhoto(["http://open.web.meitu.com/sources/images/2.jpg","http://open.web.meitu.com/sources/images/3.jpg"], false, id);
}
xiuxiu.setUploadURL("http://meituxiuxiu.gov.cn/image_upload_form.php", id);
xiuxiu.setUploadType(2, id);
}
xiuxiu.onUploadResponse = function (data, id)
{
var msg = "上传响应";
if(id == "lite")
{
msg = "轻量编辑M2" + msg;
}
else if(id == "collage")
{
msg = "轻量拼图M3" + msg;
}
alert(msg + data);
}
xiuxiu.onDebug = function (data,id)
{
alert("错误响应" + data);
}
xiuxiu.onClose = function (id)
{
//alert(id + "关闭");
//根据id判断，各关各的
clearFlash();
}
//清除flash
function clearFlash()
{
document.getElementById("flashEditorOut").innerHTML='<div id="flashEditorContent"><p><a href="http://www.adobe.com/go/getflashplayer"><img alt="Get Adobe Flash player" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"></a></p></div>';
}
</script>
<style type="text/css">
html, body { height:100%;}
body { margin:0; }
</style>
</head>
<body>
<div id="flashEditorOut">
<h1>轻量编辑</h1>
<div id="altContent1">
</div>
<h1>轻量拼图</h1>
<div id="altContent2">
</div>
</div>
</body>
</html>
php代码
image_upload_form.php
<?php
/**
* Note:for multipart/form-data upload
* 这个是标准表单上传PHP文件
* Please be amended accordingly based on the actual situation
*/
if (!$_FILES['Filedata']) {
die ( 'Image data not detected!' );
}
//print_r($_FILES);die;
if ($_FILES['Filedata']['error'] > 0) {
switch ($_FILES ['Filedata'] ['error']) {
case 1 :
$error_log = 'The file is bigger than this PHP installation allows';
break;
case 2 :
$error_log = 'The file is bigger than this form allows';
break;
case 3 :
$error_log = 'Only part of the file was uploaded';
break;
case 4 :
$error_log = 'No file was uploaded';
break;
default :
break;
}
die ( 'upload error:' . $error_log );
} else {
$img_data = $_FILES['Filedata']['tmp_name'];
$size = getimagesize($img_data);
$file_type = $size['mime'];
if (!in_array($file_type, array('image/jpg', 'image/jpeg', 'image/pjpeg', 'image/png', 'image/gif'))) {
$error_log = 'only allow jpg,png,gif';
die ( 'upload error:' . $error_log );
}
switch($file_type) {
case 'image/jpg' :
case 'image/jpeg' :
case 'image/pjpeg' :
$extension = 'jpg';
break;
case 'image/png' :
$extension = 'png';
break;
case 'image/gif' :
$extension = 'gif';
break;
}
}
if (!is_file($img_data)) {
die ( 'Image upload error!' );
}
//图片保存路径,默认保存在该代码所在目录(可根据实际需求修改保存路径)
$save_path = dirname( __FILE__ );
$uinqid = uniqid();
$filename = $save_path . '/' . 'images' . '/' . $uinqid . '.' . $extension;
$result = move_uploaded_file( $img_data, $filename );
if ( ! $result || ! is_file( $filename ) ) {
die ( 'Image upload error!' );
}
echo 'Image data save successed,file:' . $filename;
exit ();