[英]How can I use a component like react-image-editor for cropping an image in react-admin
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.我正在使用React-Admin
,我需要使用/创建一个组件来裁剪图像(个人资料图像)并将其存储为 base64 图像。 I found @toast-ui/react-image-editor
better than other libraries but I have a problem with that.我发现@toast-ui/react-image-editor
比其他库更好,但我对此有疑问。 In React-Admin
when we use ImageInput
like this:在React-Admin
当我们像这样使用ImageInput
时:
<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.实际上,我的问题是将新组件连接到 react-admin 使用的模型。
I have recently written such a component, you can find it under the following link: EditableImageComponent .我最近写了一个这样的组件,你可以在以下链接下找到它: EditableImageComponent 。 I don't use @toast-ui/react-image-editor
for this, like you do, but ReactImageCrop , maybe the component will help you anyway.我不像你那样使用@toast-ui/react-image-editor
,但是ReactImageCrop ,也许该组件无论如何都会帮助你。 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")编辑:为了在您的 EditView 中使用此组件,只需像其他所有输入组件一样调用它(假设您的目标称为“imagename”)
<EditableImage source="imagename" {...props} label="User image (Use the upload button to edit)"/>
I have use @toast-ui/react-image-editor
as my image editor.我使用@toast-ui/react-image-editor
作为我的图像编辑器。 i use modal to edit images in gallery.我使用模态来编辑图库中的图像。 My simple code using react and bootstrap.我使用 react 和 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}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.