标签:
下载crossdomain.xml文件,把解压出来的crossdomain.xml文件放在您保存图片或图片来源的服务器根目录下,
比如: http://example.com.cn,那么crossdomain.xml的路径为:http://example.com.cn/crossdomain.xml。
需要注意的是crossdomain.xml必须部署于站点根目录下才有效, crossdomain.xml的目的是授权来自美图域下的flash向您的站点上传图片或者从您的站点加载图片。
【备注】由于本地测试会被flash安全沙箱拦住,请自行搭建web服务器,在web 环境中测试。
在你的网页代码head标签里或者body标签里加入代码。
<script src="http://open.web.meitu.com/sources/xiuxiu.js" type="text/javascript"></script>
功能描述:网页中嵌入美图秀秀的编辑器
语法:
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");
功能描述:编辑器载入图片
语法:
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);
功能描述:设置上传接口地址,接收图片的地址
语法:
xiuxiu.setUploadURL (url,id);
参数 | 必选 | 字段类型 | 说明 |
---|---|---|---|
url | 是 | string | 设置上传接口地址(必须为绝对路径) |
id | 否 | string | 编辑器在页面中的id,默认值为" xiuxiuEditor" |
示例代码
xiuxiu.setUploadURL("http://web.upload.meitu.com/image_upload.php"); //修改为您自己的上传接收图片程序
功能描述:设置上传参数(如无需上传参数可不调用)
语法:
xiuxiu.setUploadArgs (args,id);
参数 | 必选 | 字段类型 | 说明 |
---|---|---|---|
args | 是 | object | 设置上传参数 |
id | 否 | string | 编辑器在页面中的id,默认值为" xiuxiuEditor" |
示例代码
xiuxiu.setUploadArgs({a:1, b:"lucky"});
功能描述:设置上传方式(以下流式和表单上传都是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"。
功能描述:设置在上载 POST 操作中位于文件数据之前的字段名
也就是对应于设置html<input type="file" name="Filedata" id="file" />中的name
语法:
xiuxiu.setUploadDataFieldName (uploadDataFieldName,id);
参数 | 必选 | 字段类型 | 说明 |
---|---|---|---|
uploadDataFieldName | 是 | string | 仅对表单上传有效(如果使用表单上传且字段名不为"Filedata"才需调用此函数) |
id | 否 | string | 编辑器在页面中的id,默认值为" xiuxiuEditor" |
示例代码
xiuxiu.setUploadDataFieldName("Filedata");
如果以上事件还不能满足您的需求,请查看高级方法。
点击显示高级方法
xiuxiu.onInit = function(id) {}
当编辑器初始化完成时调用,必须定义一个在调用事件处理函数时执行的函数。
参数 | 说明 |
---|---|
id | 调度此事件的编辑器在页面中的id |
示例代码
xiuxiu.onInit = function (id) { // your code here alert("flash初始化完成"); }
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; }
xiuxiu.onUploadResponse= function(data,id) {}
当上传图片后端响应时调用,必须定义一个在调用事件处理函数时执行的函数。
参数
data:服务器端返回的数据
id:调度此事件的编辑器在页面中的id
示例代码
xiuxiu.onUploadResponse = function (data) { alert("上传响应" + data); }
xiuxiu.onClose = function(id) {}
当在flash中点击关闭按钮时调用,必须定义一个在调用事件处理函数时执行的函数。
参数
id:调度此事件的编辑器在页面中的id
示例代码
xiuxiu.onClose = function (id) { alert("编辑器关闭"); }
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">
php代码
标签:
原文地址:http://www.cnblogs.com/yhdsir/p/4648836.html