我如何使用像 react-image-editor 这样的组件在 react-admin 中裁剪图像

Question

我正在使用 React-Admin，我需要 use/create 用于裁剪图像（个人资料图像）并将其存储为 base64 图像的组件。我发现 @toast-ui/react-image-editor 比其他图书馆更好，但我对此有疑问。在 React-Admin 中，当我们像这样使用 ImageInput 时：

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

数据可以从源加载（在编辑模式下）并将存储在那里，但是当我们像我提到的那样使用其他组件时，我需要知道如何将数据作为源传递到那个。使用这个库或任何其他库对我来说都没有关系...但我需要一个使用简单的库。

实际上，我的问题是将新组件连接到 react-admin 使用的模型。

Answer 1

我最近写了这样一个组件，你可以在下面link下找到它： EditableImageComponent。我不像你那样使用 @toast-ui/react-image-editor，但是 ReactImageCrop，也许这个组件无论如何都会帮助你。目前我的代码有一些错误（加载图像后，裁剪必须在应用之前更改一次），但到目前为止效果很好。

Edit：为了在您的 EditView 中使用此组件，只需像调用其他所有输入组件一样简单地调用它（假定您的目标称为 "imagename" )

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

Answer 2

我使用 @toast-ui/react-image-editor 作为我的图像编辑器。我使用模式来编辑图库中的图像。我使用 react 和 bootstrap.

的简单代码

首先导入 React 图片编辑器。

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

如果您使用 class 组件，请添加此行。

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

或者，如果您使用功能组件，请添加此行。

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

然后在组件中调用react image editor

<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}

/>

我如何使用像 react-image-editor 这样的组件在 react-admin 中裁剪图像

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

node.js

reactjs

react-admin

toast-ui-image-editor