美图秀秀不仅有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实现图片的裁剪及美化的更多相关文章
	

    
								
  1. thinkphp + 美图秀秀api 实现图片裁切上传，带数据库
		
    思路: 1.数据库 创建test2 创建表img,字段id,url,addtime 2.前台页: 1>我用的是bootstrap 引入必要的js,css 2>引入美图秀秀的js 3.后台: ...
    
		
    2. 
						
  2. Qt Quick 图像处理实例之美图秀秀（附源代码下载）
		
    在<Qt Quick 之 QML 与 C++ 混合编程具体解释>一文中我们解说了 QML 与 C++ 混合编程的方方面面的内容,这次我们通过一个图像处理应用.再来看一下 QML 与 C++ ...
    
		
    3. 
						
  3. iOS 图片部分模糊，类似于美图秀秀
		
    代码地址如下:http://www.demodashi.com/demo/14277.html 演示效果 演示效果 代码结构 项目结构截图如下: 该模块的核心源码部分为 MBPartBlurView, ...
    
		
    4. 
						
  4. iOS开发系列--打造自己的“美图秀秀”
		
    --绘图与滤镜全面解析 概述 在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益于它强大的开发框架.今天我们将围绕iOS中两大图形.图像绘图框架进行介绍:Quartz ...
    
		
    5. 
						
  5. iOS开发系列--打造自己的“美图秀秀”
		
    概述 在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益于它强大的开发框架.今天我们将围绕iOS中两大图形.图像绘图框架进行介绍:Quartz 2D绘制2D图形和Co ...
    
		
    6. 
						
  6. 强大的修图app－－美图秀秀
		
    美图秀秀的强大之处   市面上有很多图形处理软件,最专业的是ps,但是ps做起来需要的专业技术很高,而美图秀秀可以说用起来并不需要很专业,操作起来非常方便,而且界面可爱.所以说美图秀秀是一款很好用的免 ...
    
		
    7. 
						
  7. 美图秀秀DBA谈MySQL运维及优化
		
    美图秀秀DBA谈MySQL运维及优化 https://mp.weixin.qq.com/s?__biz=MzI4NTA1MDEwNg==&mid=401797597&idx=2& ...
    
		
    8. 
						
  8. 强大的Core Image(教你做自己的美图秀秀))
		
    iOS5新特性:强大的Core Image(教你做自己的美图秀秀))       iOS5给我们带来了很多很好很强大的功能和API.Core Image就是其中之一,它使我们很容易就能处理图片的各种效 ...
    
		
    9. 
						
  9. iOS：iOS开发系列–打造自己的“美图秀秀”(下)
		
    来源: KenshinCui 链接:http://www.cnblogs.com/kenshincui/p/3959951.html 运行效果: 其他图形上下文 前面我们也说过,Quartz 2D的图 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. [POI2015]PUS
			
    嘟嘟嘟 这题只要往正确的方面想,就很简单. 首先,这是一道图论题! 想到这,这题就简单了.对于两个数\(i\)和\(j\),如果\(i\)比\(j\)大,就从\(i\)向\(j\)连边.然后如果图中存 ...
    
			
    2. 
						
  2. php之微信公众号发送模板消息
			
    讲一下开发项目中微信公众号发送模板消息的实现过程(我用的还是Thinkphp5.0). 先看一下效果,如图: 就是类似于这样的,下面讲一下实现过程: 第一步:微信公众号申请模板消息权限: 立即申请:  ...
    
			
    3. 
						
  3. RobotFramework和Eclipse集成-安装和使用说明
			
    1.安装python3. 安装说明: https://www.cnblogs.com/Simple-Small/p/9179061.html 2.RF安装命令:Pip install RobotFra ...
    
			
    4. 
						
  4. vue兄弟之间传值  bus中央事件总线
			
    创建一个eventVue.js文件 import Vue from 'vue' export default new Vue 父 <template> <div> <di ...
    
			
    5. 
						
  5. TypeError: argument 1 must be an integer, not _subprocess_handle/OSError： [WinError 87]
			
    Error Msg: Traceback (most recent call last): File "c:\python27\lib\site-packages\celery\worker ...
    
			
    6. 
						
  6. c++  _pFirstBlock == pHead
			
    今天写程序时碰到了这个异常,导致调试的程序卡死.在网上找了很久答案,都没解决.大致判定是对象被多次析构,但又确认程序逻辑没有问题. 后来参考了 http://www.cnblogs.com/qinta ...
    
			
    7. 
						
  7. 在oracle表中增加字段，并调整字段的顺序
			
    增加字段的语句很简单,以用户身份连接oracle服务: alter table tablename add(colname coltype); # 填上表名.字段名.字段类型 修改字段顺序前,查看表中 ...
    
			
    8. 
						
  8. Tomcat7 JDK8 Java HotSpot(TM) 64-Bit Server VM warning: INFO: os::commit_memory(0x0000000540000000, 5368709120, 0) failed; error='Cannot allocate memory' (errno=12)
			
    [root@crm-web- bin]# shutdown.sh bash: shutdown.sh: command not found [root@crm-web- bin]# sh shutdo ...
    
			
    9. 
						
  9. NodeJs之EXCEL文件导入导出MongoDB数据库数据
			
    NodeJs之EXCEL文件导入导出MongoDB数据库数据 一,介绍与需求 1.1,介绍 (1),node-xlsx : 基于Node.js解析excel文件数据及生成excel文件. (2),ex ...
    
			
    10. 
						
  10. js中对象引用出现的问题
			
    先看一个特别不符合直觉的代码 <script type="text/javascript"> var a = [1,2,3,4]; var b = [1,2,3,4]; ...
    
			
    11.