我正在尝试在后端使用 Firebase 为 React.js 实现 Filepond 库的插件。关于实现裁剪插件的文档很薄。我想做的就是对添加为个人资料图片的每张图像强制采用 1:1 的裁剪比例,但是使用当前代码,它挂在Waiting for size - Loading...
在此处的文档中提到,提示结合使用转换插件来获取裁剪功能,但不确定如何使用该create()
功能来获取此功能。
有没有按照我的意图实施作物的例子?或者有人可以告诉我他们是如何让它工作的吗?谢谢!
代码:
import React, { useState, Component } from "react";
// Filepond / Upload
import * as upload from "../../utils/upload";
import { FilePond, registerPlugin } from "react-filepond";
import "filepond/dist/filepond.min.css";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import FilePondPluginImageResize from "filepond-plugin-image-resize";
import FilePondPluginImageValidateSize from "filepond-plugin-image-validate-size";
import FilePondPluginFileValidateSize from "filepond-plugin-file-validate-size";
import "filepond/dist/filepond.min.css";
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css";
import FilePondPluginImageTransform from "filepond-plugin-image-transform";
import FilePondPluginImageEdit from "filepond-plugin-image-edit";
registerPlugin(
FilePondPluginImageResize,
FilePondPluginImagePreview,
FilePondPluginImageValidateSize,
FilePondPluginFileValidateSize,
FilePondPluginImageTransform,
FilePondPluginImageEdit
);
export class Personal extends Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.updateProfPicUrl = this.updateProfPicUrl.bind(this);
this.user = this.props.user;
this.files = [];
this.pathToUrl = {};
this.basePath = `/users/${this.props.user.id}/images/profPic`;
this.process = upload.process(
this.basePath,
this.pond,
this.pathToUrl,
this.files
);
this.revert = upload.revert(this.pathToUrl, this.files);
}
updateProfPicUrl() {
if (this.files > 0) {
this.props.updateProfPicUrl(this.files, this.pathToUrl);
this.props.handleCloseModal();
} else {
alert("Please choose a file from your computer to upload first!");
}
this.files = [];
this.pathToUrl = {};
}
handleChange(e) {
this.setState({ [e.target.name]: e.target.value });
}
render() {
return (
<div>
<FilePond
ref={ref => (this.pond = ref)}
files={this.files}
allowMultiple={false}
imageEditInstantEdit={true}
imageCropAspectRatio={1}
onupdatefiles={fileItems => {
// Set current file objects to this.state
this.files = fileItems.map(function(fileItem) {
let file = fileItem;
file.uuid = uuid().toString();
return file;
});
}}
server={{
process: this.process,
revert: this.revert
}}
/>
<button
onClick={() => {
this.props.updateProfPicUrl(
this.files,
this.pathToUrl
);
}}
className="s-btn"
>
Update
</button>
</div>
);
}
}