美图秀秀web开发文档
Xiuxiu 组件 import React, { Component } from 'react'; class XiuXiu extends Component {
componentDidMount() {
const {closeModal, imageUrl, uploadUrl, formData} = this.props;
/* 第1个参数是加载编辑器div容器,第2个参数是编辑器类型,第3个参数是div容器宽,第4个参数是div容器高*/
xiuxiu.embedSWF('altContent', 1, '700px', '520px');
// 修改为您自己的图片上传接口
xiuxiu.setUploadURL(uploadUrl);
xiuxiu.setUploadType(2);
xiuxiu.setUploadDataFieldName('file');
xiuxiu.setUploadArgs(formData);
xiuxiu.onInit = function () {
xiuxiu.loadPhoto(imageUrl);
};
xiuxiu.onUploadResponse = function (data) {
closeModal(true);
};
xiuxiu.onBatchUploadComplete = function () {
closeModal(true);
};
xiuxiu.onClose = function(id) {
closeModal(false);
};
xiuxiu.onUpload = function(id) {
closeModal(true);
};
}
render() {
return (
<div id='altContent'>
</div>
);
}
} export default XiuXiu; XiuxiuComponent
class XiuXiuModal extends Component {
state = {
visible: false,
}
showModal = () => {
this.setState({visible: true});
}
closeModal = (isEdit) => {
const {imageUrl} = this.props;
this.props.onClose(imageUrl, isEdit);
this.setState({visible: false});
}
render() {
const {children, policyImage, imagePath} = this.props;
const formData = {
signature: policyImage.signature,
OSSAccessKeyId: policyImage.accessid,
policy: policyImage.policy,
key: imagePath,
success_action_status: '200',
};
return (
<a onClick={this.showModal}>
{children}
{this.state.visible && <Modal wrapClassName='xiuxiu-wrapper' closable={false} width='700px' footer={null} title={null} visible >
<XiuXiu uploadUrl={policyImage.host} formData={formData} closeModal={this.closeModal} {...this.props} />
</Modal>}
</a>
);
}
}
最终引入
import XiuXiu from 'components/XiuXiu';
class ItemBox extends Component {
componentDidMount () {
const {folderFormatType, folderId, actions: {policyActions: {getImagePolicy}, ownActions: {loadMaterial}}} = this.props;
loadMaterial(folderId, undefined, true, folderFormatType);
getImagePolicy();
}
cancelEditImage = (imageUrl, isEdit) => {
const {actions: {ownActions: {editMaterial}}, materials} = this.props;
const item = find(materials, {coverImage: imageUrl});
if(isEdit) {
editMaterial({
id: item.id,
version: item.version + 0.1,
});
}
}
render () {
const {actions: {ownActions: {addMaterial, loadMaterial}},
page, policyImage, materials, folderId, folder, profile} = this.props;
return (
<XiuXiuModal onClose={this.cancelEditImage} imagePath={item.path} policyImage={policyImage} imageUrl={item.url}>
编辑图片
</XiuXiuModal>
);
}
}
注意:
1、引入美图秀秀必须加载上传图片接口
2、设置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 环境中测试。
美图秀秀web开发文档的更多相关文章
- 美图秀秀 web开发图片编辑器
美图秀秀web开发平台 http://open.web.meitu.com/wiki/ 1.环境配置 1.1.设置crossdomain.xml 下载crossdomain.xml文件,把解压出来的c ...
- web开发文档整理
django 1.11版中文文档 django 1.11版英文文档 Redis命令参考文档 Axios中文文档 Axios英文官方文档 Django REST Framework官方文档 Vue.js ...
- Web图片编辑控件开发文档-Xproer.ImageEditor
版权所有 2009-2014 荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com 产品首页:http://www.ncmem.com/webplug/image-e ...
- thinkphp + 美图秀秀api 实现图片裁切上传,带数据库
思路: 1.数据库 创建test2 创建表img,字段id,url,addtime 2.前台页: 1>我用的是bootstrap 引入必要的js,css 2>引入美图秀秀的js 3.后台: ...
- 美图秀秀api实现图片的裁剪及美化
美图秀秀不仅有PC版.手机版等客户端的软件,还有Web开方接口,可以在web页面上调用美图秀秀的api接口,实现图片的编辑.像淘宝.网易.qq空间.新浪微博等大厂都使用过该接口. 官网地址:http: ...
- 简易的美图秀秀利用别人的so库
在实际开发中,有时候时间短,任务量大,可以查看类似的apk,将行apk反编译,通过看源码分析,用里面的JNI代码! 本案例中用了美图秀秀的JNI.java和jni.so链接库 项目中调用别人写的c代码 ...
- C#微信开发文档
C#微信开发文档 开发前准备 微信公众平台链接: https://mp.weixin.qq.com/cgi-bin/home?t=home/index&lang=zh_CN 开发初期我们使用测 ...
- QM项目开发文档整理
QM项目开发文档整理 前言 在W公司工作4个多月,庆幸接触到的全是"硬"项目,真枪实干,技术.经验.能力都得到了很大提升. QM项目 此项目WEB前端学到的东西很多,对PHP项目的 ...
- 美图秀秀DBA谈MySQL运维及优化
美图秀秀DBA谈MySQL运维及优化 https://mp.weixin.qq.com/s?__biz=MzI4NTA1MDEwNg==&mid=401797597&idx=2& ...
随机推荐
- 让Web站点崩溃最常见的七大原因
转载自: https://blog.csdn.net/u012981511/article/details/53503242 1. 磁盘已满 导致系统无法正常运行的最可能的原因是磁盘已满.一个好的网络 ...
- ipvsadm分发MySQL读请求
在MySQL的部署场景中,经常使用HAproxy和ipvs来作为读请求转发的网关.ipvs的好处在于本身不需要daemon的方式来运行,而是直接作为kernel的服务来提供:当ipvs和应用程序服务器 ...
- destoon模块自定义字段的添加并让其支持搜索的方法
今天看了看模块设置里的自定义字段功能的用法,试着加了个新字段glry,设置了值,然后去数据库moduleid的article表看,字段成功加上了. 于是去template下article文件夹的lis ...
- AD采样求平均STM32实现
iADC_read(, &u16NTC_1_Sample_Val_ARR[]); == ui8FirstSampleFlag) { ; i<; i++) { u16NTC_1_Sampl ...
- Statues CodeForces - 129C(bfs)
In this task Anna and Maria play a game with a very unpleasant rival. Anna and Maria are in the oppo ...
- Makefile基础(一)
在大型的C语言项目中,一般都是由多个源文件编译链接形成的可执行程序,而这些源文件的处理步骤,通常交给Makefile来管理,Makefile定义了一系列的规则来指定,哪些文件需要先编译,哪些文件需要后 ...
- xcode各个版本下载 xcode7 xcode6 xcode5
登录开发者帐号,选择 support,然后操作如下图: 登录开发者帐号,选择 support,然后操作如下图: 登录开发者帐号,选择 support,然后操作如下图: 登录开发者帐号,选择 suppo ...
- stl vector 类
目录 [-]说明构造方法例子vector 类中定义了4中种构造函数: · 默认构造函数,构造一个初始长度为0的空向量,如:vector<int> v1; · 带有单个整形参数的构造函数,此 ...
- day03_03 第一个Python程序
Python的安装 之前安装了python2.7.11,接下来的课程因为是python3的,需要再安装一个python3版本...... 1.进入python.org进行选择安装 2.或者选择课件里的 ...
- POJ 1240 Pre-Post-erous!
k叉树的前序和后续遍历,问一共有多少种这样的k叉树 这个就是树的同构,组合数就能解决 同样的题目在51nod也有的,我的另一篇博客 POJ 1240 Pre-Post-erous! We are al ...