美图秀秀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 设定自定义菜单,可以自行组合你要的功能。

美图秀秀还有其他的接口,例如指定打开编辑器默认进入的菜单等等。

原文地址:https://www.cnblogs.com/lixiuke/p/10000352.html

时间: 2024-10-11 13:24:40

美图秀秀api实现图片的裁剪及美化的相关文章

Qt Quick 图像处理实例之美图秀秀(附源码下载)

在<Qt Quick 之 QML 与 C++ 混合编程详解>一文中我们讲解了 QML 与 C++ 混合编程的方方面面的内容,这次我们通过一个图像处理应用,再来看一下 QML 与 C++ 混合编程的威力,同时也为诸君揭开美图秀秀.魔拍之类的相片美化应用的底层原理. 项目的创建过程请参考<Qt Quick 之 Hello World 图文详解>,项目名称为 imageProcessor ,创建完成后需要添加两个文件: imageProcessor.h 和 imageProcessor.

美图秀秀一寸照片的制作

在浏览器里搜索美图秀秀,并点击下载 2安装之后,打开美图秀秀,选择图片美化 3选择打开一张图片,添加需要修改的图片 4此时图片添加完成,点击左侧的尺寸修改 5点击取消锁定高宽比例 6修改高宽尺寸为344×482,点击确定 7点击右上方的保存与分享 8点击保存,即可完成一寸照片的制作 原文地址:https://www.cnblogs.com/allyh/p/10416061.html

美图秀秀-美化图片之【特效】界面设计

本文是特效界面设计,在美图秀秀的特效模块主要是实现图片添加滤镜效果,界面挺炫的. 界面包含黑边和虚化按钮,4种类型的滤镜,每种类型又包含许多具体滤镜效果,当我们点击时候开始处理图片 1.加载图片 self.imageView = [[UIImageView alloc] initWithImage:self.image]; self.imageView.frame = CGRectMake(0, 0, WIDTH, HEIGHT - 130); self.imageView.contentMod

iOS开发系列--打造自己的“美图秀秀”

http://www.cnblogs.com/kenshincui/p/3959951.html#overview --绘图与滤镜全面解析 概述 在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益于它强大的开发框架.今天我们将围绕iOS中两大图形.图像绘图框架进行介绍:Quartz 2D绘制2D图形和Core Image中强大的滤镜功能. Quartz 2D 基本图形绘制 视图刷新 其他图形上下文 Core Image Quartz 2D 在iOS中常用的绘图框

强大的Core Image(教你做自己的美图秀秀))

iOS5新特性:强大的Core Image(教你做自己的美图秀秀)) iOS5给我们带来了很多很好很强大的功能和API.Core Image就是其中之一,它使我们很容易就能处理图片的各种效果,色彩啊,曝光啊,饱和度啊,变形啊神马的.可惜苹果一直没能完善官方文档,也没有推出示例代码,所以国内很多同学可能还没有开始使用.但国外的大神们已经证明这是个相当强悍的框架,不仅功能强大,而且可以直接使用GPU,效率奇高,甚至可以实时的对视频进行渲染.下面让我们来看看,如何具体使用它:首先你需要导入 CoreI

打造自己的“美图秀秀”

概述 在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益于它强大的开发框架.今天我们将围绕iOS中两大图形.图像绘图框架进行介绍:Quartz 2D绘制2D图形和Core Image中强大的滤镜功能. Quartz 2D 在iOS中常用的绘图框架就是Quartz 2D,Quartz 2D是Core Graphics框架的一部分,是一个强大的二维图像绘制引擎.Quartz 2D在UIKit中也有很好的封装和集成,我们日常开发时所用到的UIKit中的组件都是由Cor

美图秀秀 web开发图片编辑器

美图秀秀web开发平台 http://open.web.meitu.com/wiki/ 1.环境配置 1.1.设置crossdomain.xml 下载crossdomain.xml文件,把解压出来的crossdomain.xml文件放在您保存图片或图片来源的服务器根目录下,比如: http://example.com.cn,那么crossdomain.xml的路径为:http://example.com.cn/crossdomain.xml.需要注意的是crossdomain.xml必须部署于站

Core Image 制作自己的美图秀秀

一.Core Image是和啥? 关于这个问题不太好回答,但其实又也很简单.肯定是苹果推出的关于图片处理的API.网上各路大神都有解释过,不过能看明白的不多,我的理解就是Photoshop的滤镜,当然在各种美图软件里都有这个功能,咱主要看怎么用吧 二.Core Image提供了哪些可用的滤镜呢? 127 values { [0] = "CIAccordionFoldTransition" [1] = "CIAdditionCompositing" [2] = &qu

美图秀秀团队新出的短视频应用「美拍」为何这么火?

这个世界有种畅销品叫作“美”它的载体通常是可视化的——图片和视频,美图这个团队从美图秀秀到美拍无不是抓住了这个需求,让人更容易生产更高质量的美.而且视频这种信息量更大的载体相对静止的图片更能让人产生“美”的体验,视频和图片不一样,不像instagram那样加个风格滤镜就能产生一个好的效果,而且要拍好一段视频远比照片要难的多,所以此前一些微视频软件简单的加个滤镜或一些水印并不能帮助用户比较简单的生产出有美感的视频.这点美拍做到了,你发现一段再无趣的视频套用模板后,音乐和剪切效果马上让视频脱胎换骨,