美图秀秀不仅有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. IDEA Can't Update 	No tracked branch configured for branch master or the branch doesn't exist.
			
    IDEA Can't Update No tracked branch configured for branch master or the branch doesn't exist.To make ...
    
			
    2. 
						
  2. 华为笔记HOSTS，便于访问云端存储
			
    # Copyright (c) - Microsoft Corp. # # This is a sample HOSTS file used by Microsoft TCP/IP for Windo ...
    
			
    3. 
						
  3. Java异步NIO框架Netty实现高性能高并发
			
    原文地址:http://blog.csdn.net/opengl_es/article/details/40979371?utm_source=tuicool&utm_medium=refer ...
    
			
    4. 
						
  4. ASP.NET Core 2.2  十九. Action参数的映射与模型绑定
			
    前文说道了Action的激活,这里有个关键的操作就是Action参数的映射与模型绑定,这里即涉及到简单的string.int等类型,也包含Json等复杂类型,本文详细分享一下这一过程.(ASP.NET ...
    
			
    5. 
						
  5. mybatis动态数据更新 + 批量动态数据插入
			
    动态更新 <update id="updateElevator" parameterType="com.diantijiang.saas.data.elevator ...
    
			
    6. 
						
  6. jQuery的一些简单基础知识
			
    ### 什么是jQuery?jQuery(js+Query)是一款优秀的JavaScript库,帮助开发人员用最少的代码做更多的事情,官网网站http://jquery.com/ ### 为什么学习j ...
    
			
    7. 
						
  7. Git使用（积累一些常用的命令）
			
    1. 取消某一次合并  git merge --abort 可以参考的教程:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248 ...
    
			
    8. 
						
  8. SVN和GIT
			
    一.SVN SVN使用起来还是比较简单的,我使用的SVN小乌龟版本是1.1的.(SVN已经可以正常使用了) 先说下自己了解的SVN流程吧,可能比较简单,不过这个也是实际的使用情况,忽略了很多其他功能( ...
    
			
    9. 
						
  9. codeforces#1154F. Shovels Shop （dp）
			
    题目链接: http://codeforces.com/contest/1154/problem/F 题意: 有$n$个物品,$m$条优惠 每个优惠的格式是,买$x_i$个物品,最便宜的$y_i$个物 ...
    
			
    10. 
						
  10. Java导出压缩包工具类
			
    /** * @Title: exportZip * @Description:TODO(导出建压缩文件) * @param delAdviceinfo 为项目实体类 * @date 2018年4月4日 ...
    
			
    11.