首页 > 代码库 > 美图秀秀web开发文档
美图秀秀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=http://www.mamicode.com/{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开发文档
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。