首页 > 代码库 > 美图秀秀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开发文档