Блог

Я пытаюсь реализовать плагины для библиотеки Filepond для React.js использование Firebase в серверной части. Документация по реализации плагина обрезки скудна. Все, что я хочу сделать, это принудительно обрезать каждое изображение, добавленное в качестве изображения профиля, в соотношении 1: 1, но с текущим кодом оно висит на Waiting for size - Loading...

В here документации упоминается, что есть подсказка об использовании плагина transform в сочетании для получения функциональности обрезки, но не уверен, как использовать create() функцию для получения этого.

Есть ли какие-либо примеры реализации crop для работы так, как я намереваюсь? Или кто-нибудь может показать мне, как они заставили это работать? Спасибо!

Код:

 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>
    );
  }
}
  

Наконец-то я смог вернуться к этому, и я смог легко это сделать. Мне не нужны были все плагины, мне просто нужны были плагины 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);