reactjsphotoeditorsdk

can't find any method to get modified/updated image when I use PESDK in ReactComponent

Is there any way that able to get updated/modified image object using ReactComponent? Currently, PESDK React version only supports UI customization. After edit image in PhotoEditor, can I get exported object using ReactComponent so as to integrate it into existing react component? I couldn't find any solution in PESDK documentation.

If anyone knows the solution, please let me know Or PESDK is on progressing development yet?

Thanks

Solution

  • Something like this should work:

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

window.React = React
window.ReactDOM = ReactDOM

import PhotoEditorUI from 'photoeditorsdk/desktop-ui'
// import PhotoEditorUI from 'photoeditorsdk/react-ui'

class ApplicationComponent extends React.Component {
  
  // Call this when you want to export the editor image
  export () {
    this.editor.ui.export()
      .then(image => {
        // Image code here
      })
  }
  
  render () {
    const { ReactComponent } = PhotoEditorUI

    return (<ReactComponent
      license='PUT YOUR LICENSE KEY HERE' // e.h. '{"owner":"Imgly Inc.","version":"2.1", ...}'
      ref={c => this.editor = c}
      assets={{
        baseUrl: '/node_modules/photoeditorsdk/assets'
      }}
      editor={{image: this.props.image }}
      style={{
        width: 1024,
        height: 576
      }} />)
  }
}