美圖秀秀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 ();