FilePond反应作物插件

Question

我试图使用后端的Firebase实现用于React.js的Filepond库的插件。在实现裁剪插件方面，文档很薄。我所要做的就是在添加为配置文件图片的每幅图像上强制设置1:1的裁剪比，但是使用当前的代码，它挂在Waiting for size - Loading...上。

在docs 这里中提到了使用transform插件来获得裁剪功能的提示，但不确定如何使用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>
    );
  }
}

Answer 1

我终于能够重新审视这个问题了，而且我很容易就做到了。我不需要所有的插件，但只需要ImageTransform和ImageCrop插件。我刚通过了房产：

allowImageCrop={true}
allowImageTransform={true}
imageCropAspectRatio={'1:1'}

到我的<FilePond />组件。和进口：

import { FilePond, registerPlugin } from "react-filepond";
import "filepond/dist/filepond.min.css";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";
import FilePondPluginImageCrop from 'filepond-plugin-image-crop'; // Crops image
import FilePondPluginImageTransform from 'filepond-plugin-image-transform'; // Changes image to match crop
registerPlugin(FilePondPluginImagePreview, FilePondPluginImageCrop, FilePondPluginImageTransform);