美图秀秀web开发文档

Posted 2020-09-05 辣牛

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 环境中测试。