Question

我正在尝试在后端使用Firebase为React.js的Filepond库实现插件。关于实现裁剪插件的文档很少。我要做的就是在每张添加为个人资料图片的图像上强制采用1：1的裁剪比例，但是使用当前代码，它挂在Waiting for size - Loading...

上

在文档here中提到，有一个提示可以结合使用转换插件来获取裁剪功能，但不确定如何使用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);

FilePond React Crop插件

1 个答案: