Как я могу использовать такой компонент, как реагировать-редактор изображений для обрезки изображения в реагировать-администратора

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>

данные могут быть загружены из источника (в режиме редактирования), и они будут храниться там, но когда мы используем другие компоненты, такие как Я уже упоминал, мне нужно знать, как я могу передать данные в качестве источника для этого. Для меня не имеет значения использовать эту библиотеку или любую другую ... но мне нужна библиотека с простым использованием.

На самом деле, моя проблема заключается в подключении нового компонента к модели, которую использует реагирующий администратор.

Answer 1

Я недавно написал такой компонент, вы можете найти его по следующей ссылке: EditableImageComponent . Я не использую @toast-ui/react-image-editor для этого, как вы, но ReactImageCrop , возможно, компонент все равно вам поможет. На данный момент у меня есть некоторые ошибки в коде (после того, как изображение загружено, кадрирование должно быть изменено один раз, прежде чем оно будет применено), но в остальном пока оно работает довольно хорошо.

Редактировать : чтобы использовать этот компонент в вашем EditView, просто назовите его как любой другой входной компонент (предполагается, что ваша цель называется «имя-изображения»)

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