美图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);
参数 | 必选 | 字段类型 | 说明 |
---|---|---|---|
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 | 上传接口未设置 |
如果以上事件还不能满足您的需求,请查看高级事件。
点击隐藏高级事件
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("图片全部上传完成,接下去自行处理");
}
美图WEB开放平台环境配置的更多相关文章
- 梅安森元图地图开放平台、专业GIS地图平台
元图地图开放平台:http://map.cmetamap.com/?from=groupmessage 梅安森元图地图开放平台: 自主知识产权,专业GIS地图平台,用简单语言即可轻松操作复杂的互联网地 ...
- web前端的环境配置
1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源(如html 页 ...
- Django Web开发基础环境配置流程
创建虚拟环境 mkvirtualenv django_py3_1.11 -p python3 注意需要联网 安装Django 使用django 1.11.11版本,注意需要联网 pip install ...
- web自动化开发环境配置详解
1.安装 nodejs Grunt和所有grunt插件都是基于nodejs来运行的, https://nodejs.org/ 安装完成之后在终端 node -v 查看安装版本 2.安装 grunt-C ...
- AI—家庭组机器人平台环境配置,高级人工智能实验总结
首先说一下我的环境:Ubuntu 12.04 32bit, gcc 4.6.3 一,安装boost 1.48,建议用这个版本的,不然会出现兼容性问题 步骤: 其实在ubuntu下,可以用一下命令直接 ...
- Web自动化Selenium2环境配置中Selenium IDE的安装
下载的firefox32.0的版本,但是在附件组件中只有selenuim IDE button,本以为这个就是selenium IDE插件,自以为是的后果就是把自己坑了.并且像一些selenium I ...
- web安全攻防-环境配置
1.安装虚拟机VMware Workstation12 PRO 2.在虚拟机上安装kali2.0 3.查看liunx的ip地址ifconfig 4.端口 协议 (1)RDP协议(桌面协议)3389端口 ...
- web开发之环境配置和文件系统
web开发中有jsp,html,css,java,pictures等文件和程序,怎么组织他们,使其正确加载,是一个比较大的问题,就像一团乱麻,解不开啊.IDE是个大管家,要对它非常熟悉才可以,跟顺利地 ...
- 美图秀秀 web开发图片编辑器
美图秀秀web开发平台 http://open.web.meitu.com/wiki/ 1.环境配置 1.1.设置crossdomain.xml 下载crossdomain.xml文件,把解压出来的c ...
随机推荐
- 关于这个博客以及C++入门该懂的一些东西
给三牧中学c++入门的同学们看的博客. 大概是入门一类的?说不定会写点自己的结题报告. 写的不好/写错了别怪我,蒟蒻瑟瑟发抖. 天哪要开始写入门了我好慌那么接下来是编译器连接. (本蒟蒻喜欢用DEV ...
- Asp.net 配置web.Config 在出错时跳转到相应页面
<!--<customErrors mode="On" defaultRedirect="error.aspx"> <erro ...
- 《HTTP权威指南》大块儿头
看到这样的一本书,胡乱翻开看看里面的内容,我觉得我又浮躁了.真厚啊!能学多少就学多少吧. 看看提要,这本书主要想讲的是HTTP和相关Web技术的.关于这方面的内容,知道的不多.
- C#调用exe文件,IIS发布后无法掉用本地exe程序的解决方法
http://blog.csdn.net/junjieking/article/details/6277836?reload这位楼主的问题,我也遇到了,但是我按照他那样操作并没有解决问题,弄了好久终于 ...
- windows下装多个node版本的方法(gnvm)
安装一个支持windows切换node版本的工具 工作中我们可能需要用到一些工具,但这些工具依赖不同版本的node环境,那我们需要来为的切换node的环境吗, window msi安装的用户需要卸 ...
- C#时间戳转换
,,)).ToUniversalTime ().Ticks ) / ;//先取得当前的UTC时间,然后转换成计算用的周期数(简称计时周期数),每个周期为100纳钞(ns)=0.1微秒(us)=0.00 ...
- requireJs--简单的使用方法
简单使用: <!-- index.html部分 data-main 为入口 --> <script data-main="js/app.js" src=" ...
- Swift库运行崩溃
报错如下: 解决方法: 退出 Xcode 找到 DerivedData 文件夹 删除 (路径: ~/Library/Developer/Xcode/DerivedData) 删除 com.apple. ...
- Permission denied user=hadoop access=WRITE inode=root rootsupergroup rwxr
有段时间没有写了,反正我写的都是跟流水账一样.不为别人看,当然,其中也记录了很多我踩过的坑,可能也能给别人提个醒.最重要的是:这是我学习的记忆 上面的错误是由于我将reducer的输出目录设置在hdf ...
- ajax优点与缺点
ajax的优点 Ajax的给我们带来的好处大家基本上都深有体会,在这里我只简单的讲几点: 1.最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好. 2.使用异步方式与服务器通信,不需要打 ...