application/components/content/darkroom-editor.js

import React, { Component } from 'react';

const STYLES = {
    zIndex: 9999,
    position: 'absolute',
    top: '100px',
    left: '25%',
    width: '100%'
};

const BGSTYLES = {
    zIndex: 999,
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100%',
    background: 'rgba(50,50,50,0.5)'
};

class DarkroomEditor extends React.PureComponent {
    constructor(props) {
        super(props);

        this.editorRef = React.createRef();
        this.state = {
            imageWidth: 800,
            editor: null
        };
    }

    componentDidMount() {
        let editor = new window.Darkroom(
            this.editorRef.current,
            {
                minWidth: 100,
                minHeight: 100,
                backgroundColor: '#000',
                plugins: {
                    close: {
                        callback: (editor) => {
                            editor.darkroom.selfDestroy();
                            this.props.onClose();
                            console.log('BARK', editor, this);
                        }
                    },
                    save: {
                        callback: (editor) => {
                            const img = editor.darkroom.canvas.toDataURL();
                            editor.darkroom.selfDestroy(); // Cleanup
                            this.props.onSave(img);
                        }
                    }
                }
            }
        );
        this.editorRef.current.onload = () => {
            this.setState({
                imageWidth: this.editorRef.current.width
            });
        };

    }

    render() {
        const bgStyles = Object.assign({}, BGSTYLES, {
            height: window.innerHeight + 'px'
        });
        const containerStyles = Object.assign({}, STYLES, {
            left: (window.innerWidth/2) - (this.state.imageWidth/2) + 'px'
        });

        let uuid = this.props.src.substr(this.props.src.lastIndexOf('/')+1);
        uuid = uuid.substr(0, uuid.indexOf('.sized'));

        const localPath = '/content/cors/' + uuid;

        return (
            <div style={bgStyles}>
                <div style={containerStyles}>
                    <img src={localPath} crossOrigin="anonymous" ref={this.editorRef} />
                </div>
            </div>
        );
    }
}

export default DarkroomEditor;