Как я могу экспортировать функцию прослушивания в React Photoeditor SDK - PullRequest
0 голосов
/ 12 марта 2019

Вот мой код.Я новичок, чтобы реагировать, так что извините, если я делаю что-нибудь напуганное.В обычном javascript вы бы использовали editor.on('export',function (dataUrl) {...}), поэтому я попытался сделать что-то похожее, но безуспешно.Вот документы https://github.com/imgly/pesdk-react-demo и https://docs.photoeditorsdk.com/guides/html5/v4/introduction/overview

import React from 'react'
import ReactDOM from 'react-dom'

import PhotoEditorUI from 'photoeditorsdk/desktop-ui'
import Styles from 'photoeditorsdk/css/PhotoEditorSDK.UI.DesktopUI.css'
import ReactModal from 'react-modal';

ReactModal.setAppElement('#app')
class PhotoEditor extends React.Component {
    constructor(props) {
        super(props)
        this.closePhotoEditor = this.closePhotoEditor.bind(this);
    }

    closePhotoEditor() {
        console.log("closed");
        this.editor.ui.dispose();
    }

    this.editor.ui.on('export', (result) => {
        console.log('User clicked export, resulting image / dataurl:', result) 
    })


    export() {
        this.editor.ui.export()
            .then(image => {
                console.log(image);
            })
    }

    render() {
        let image = new Image();
        image.crossOrigin = "anonymous";
        image.src = this.props.url;
        return (
            <ReactModal 
                isOpen={this.props.isOpen}
                style={customStyles}
                contentLabel="Edit Asset"
            >
                <button className="closeButton" onClick={this.closePhotoEditor}>X</button>
                <PhotoEditorUI.ReactComponent
                    className= "photoEditor"
                    license='LISCENSE'
                    assets={{
                        baseUrl: '/node_modules/photoeditorsdk/assets'
                    }}
                    ref={c => this.editor = c}
                    editor={{
                        image: image,
                        export: {
                            download: false,
                            type: "data-url",
                            format: "image/jpeg"
                        },
                        forceCrop: true,
                        replaceFonts: false,
                        controlsOptions: {
                            transform: {
                                availableRatios: ['imgly_transform_common_16-9']
                            },
                            text: fontsObject
                        }
                    }}
                    style={{
                        width: '95vw',
                        height: '95vh'
                    }}
                    extensions={{
                        languages: {
                            custom: customLanguageObject
                        }
                    }}
                    language='custom'
                />

            </ReactModal>
        )
    }
}
export default PhotoEditor
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...