美图秀秀 web开发图片编辑器

时间：2021-11-28 08:43:04
美图秀秀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
php示例可参考 流式上传 或者 标准表单上传；
C#示例可参考 流式上传 或者 标准表单上传；
JSP示例可参考 流式上传 或者 标准表单上传。
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 ();

相关文章