Вот мой код.Я новичок, чтобы реагировать, так что извините, если я делаю что-нибудь напуганное.В обычном 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