美图秀秀api实现图片的裁剪及美化
Posted lixiuke
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了美图秀秀api实现图片的裁剪及美化相关的知识，希望对你有一定的参考价值。
美图秀秀不仅有PC版、手机版等客户端的软件，还有Web开方接口，可以在web页面上调用美图秀秀的api接口，实现图片的编辑。像淘宝、网易、qq空间、新浪微博等大厂都使用过该接口。
官网地址：http://open.web.meitu.com，使用方法也很简单，直接参照官网文档：
第一步：环境配置
下载 crossdomain.xml 文件，然后把 crossdomain.xml 文件放到保存图片的服务器上根目录下，例如您的保存图片的服务器地址为: http://www.example.com，那么 crossdomain.xml 的路径为：http://www.example.com/crossdomain.xml 。
部署 crossdomain.xml 的目的是授权来自美图秀秀的flash向您的站点上传图片。
【备注】由于本地测试会被flash安全沙箱拦住，请自行搭建web服务器，在web 环境中测试。
第二步：引入JS
把以下JS代码放到<head>与</head>之间
1. <script src="http://open.web.meitu.com/sources/xiuxiu.js" type="text/javascript"></script>
2. <!-- 提示:: 如果你的网站使用https, 将xiuxiu.js地址的请求协议改成https即可 -->
3. <script type="text/javascript">
4. window.onload=function(){
5. /*第1个参数是加载编辑器div容器，第2个参数是编辑器类型，第3个参数是div容器宽，第4个参数是div容器高*/
6. xiuxiu.embedSWF("altContent",3,"100%","100%");
7. //修改为您自己的图片上传接口
8. xiuxiu.setUploadURL("http://web.upload.meitu.com/image_upload.php");
9. xiuxiu.setUploadType(2);
10. xiuxiu.setUploadDataFieldName("upload_file");
11. xiuxiu.onInit = function ()
12. {
13. xiuxiu.loadPhoto("http://open.web.meitu.com/sources/images/1.jpg");//修改为要处理的图片url
14. }
15. xiuxiu.onUploadResponse = function (data)
16. {
17. //alert("上传响应" + data); 可以开启调试
18. }
19. }
20. </script>
实现效果如下：
下面说一些需要注意的地方：
1、 必须要有自己的文件上传服务端。美图秀秀编辑完成后，点击保存就会调用我们自己的文件上传接口，把编辑好的图片保存到我们自己的服务器上。
2、 美图秀秀编辑器有几种模式，
xiuxiu.embedSWF(container,editorType,width,height,id);的第二个参数editorType可以指定要嵌入的编辑器类型（1为轻量编辑，2为轻量拼图，3为完整版，5为头像编辑器，默认值1）
3、 加载图片接口不仅可以传入图片URL，也可以传base64。例如有些图片是内网URL，美图秀秀插件不能访问内网的图片，就可以把图片先转成base64，再传给美图秀秀。
单张图片：
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);
4、 点了关闭按钮编辑器不关闭的问题。默认情况下点击关闭按钮，编辑器是不会自己关闭，只会调度关闭事件，然后自己写代码把编辑器关掉，如下：
xiuxiu.onClose = function (id){
//以下根据自身实际情况自己写代码关闭
...
}
5、 再次调用编辑器总是加载同一张图片，怎样更换图片？
嵌入美图编辑器后，在一些浏览器下，每次点开编辑器，编辑器中呈现的都是同一张图片，虽然调用xiuxiu.loadPhoto的时候传的图片URL都是不一样。
原因解析：因为你调用xiuxiu.loadPhoto是在xiuxiu.onInit事件触发后才调用的，如果在关闭编辑器的时候，没有完全移除这个flash元素，而是简单的隐藏，那这个flash在它的生命周期内只会触发一次xiuxiu.onInit，隐藏再重现之后不会触发xiuxiu.onInit，自然不会再调xiuxiu.loadPhoto，因此呈现的都是同一张图片。
当关闭时需要把flash元素清除掉：
xiuxiu.onClose = function (id){
//js自行移除
}
6、 自定义增删功能模块。通过高级接口 customMenu 设定自定义菜单，可以自行组合你要的功能。
美图秀秀还有其他的接口，例如指定打开编辑器默认进入的菜单等等。
以上是关于美图秀秀api实现图片的裁剪及美化的主要内容，如果未能解决你的问题，请参考以下文章