How can I use a component like react-image-editor for cropping an image in react-admin

Question

I am using React-Admin and I need to use/create a component for cropping an image (profile image) and storing it as a base64-image. I found @toast-ui/react-image-editor better than other libraries but I have a problem with that. In React-Admin when we use ImageInput like this:

<ImageInput multiple label="Gallery" source="gallery" accept="image/*">
    <ImageField source="src" title="title" />
</ImageInput>

the data can be loaded from the source (in Edit mode) and it will be stored there, but when we use other components like what I have mentioned, I need to know how can I pass the data as a source to that. It doesn't matter for me to use this library or any others... but I need one with simple usage.

Actually, my issue is with connecting the new component to the model that react-admin use.

Answer 1

I have recently written such a component, you can find it under the following link: EditableImageComponent. I don't use @toast-ui/react-image-editor for this, like you do, but ReactImageCrop, maybe the component will help you anyway. At the moment I have some bugs in the code (after the image is loaded, the crop has to be changed once before it is applied), but otherwise it works quite well so far.

Edit: In order to use this component in your EditView, simply call it like every other Input Component (it is assumed, that your target is called "imagename")

<EditableImage source="imagename" {...props} label="User image (Use the upload button to edit)"/>

Answer 2

I have use @toast-ui/react-image-editor as my image editor. i use modal to edit images in gallery. My simple code using react and bootstrap.

first import react image editor.

import 'tui-image-editor/dist/tui-image-editor.css';
import ImageEditor from '@toast-ui/react-image-editor';

if you use class component add this line.

export default class Example extends Component {
  editorRef = React.createRef();
}

or if you use funtional component add this line.

function Example() {
  const editorRef = React.createRef();
}

then call react image editor in the component.

<ImageEditor
 ref={this.editorRef}
 includeUI={{
 loadImage: {
  path: imagePath,
  name: imageName,
 },
 theme: myTheme,
 menu: [
       "filter",
        "crop",
        "flip",
        "resize",
        "rotate",
        "text",
       ],
 initMenu: "filter",
 uiSize: {
     width: "100%",
     height: "600px",
     },
menuBarPosition: "left",
}}
cssMaxHeight={500}
cssMaxWidth={700}
selectionStyle={{
cornerSize: 20,
rotatingPointOffset: 70,
}}
usageStatistics={false}

/>