node.js - 如何使用 react-image-editor 之类的组件在 react-admin 中裁剪图像

Question

我正在使用React-Admin并且我需要使用/创建一个组件来裁剪图像（配置文件图像）并将其存储为 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

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

编辑：为了在您的 EditView 中使用此组件，只需像所有其他输入组件一样调用它（假设您的目标称为“图像名称”）

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

Answer 2

我已经@toast-ui/react-image-editor用作我的图像编辑器。我使用模态编辑画廊中的图像。我使用 react 和 bootstrap 的简单代码。

首先导入反应图像编辑器。

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

如果你使用类组件添加这一行。

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

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

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

然后在组件中调用反应图像编辑器。

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

/>