Vue Filepond 图像裁剪

Question

我正在使用 filepond 和 VueJS 上传图片。如果需要，我应该在上传时裁剪图片。

我在全球注册了 filepond 插件。

import Vue from 'vue';
import vueFilePond from 'vue-filepond';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginImageCrop from 'filepond-plugin-image-crop';

import 'filepond/dist/filepond.min.css';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';

const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview, FilePondPluginImageCrop);
Vue.component('filePond', FilePond);

然后我使用组件

<file-pond
  name="image"
  ref="pond"
  :label-idle="$t('complaint_detail.label-idle')"
  :allow-multiple="false"
  accepted-file-types="image/*"
  :server="{ process }"
  :allow-image-preview="true"
  :allow-image-crop= "true"
  :allow-revert = "false"
  v-on:init="handleFilePondInit"
  v-on:addfile="handleFilePondAddFile"
/>

这是我的process方法

process(fieldName, file, metadata, load) {
  load(file);
},
handleFilePondInit() {
  this.$refs.pond.getFiles();
},

但是使用此代码图像裁剪不起作用。在文档中，只有 allowImageCrop 另外，但它对我不起作用。这是文档的 link： https://pqina.nl/filepond/docs/patterns/plugins/image-crop/

Answer 1

您需要使用 imageCropAspectRatio 属性.

定义裁剪比例

方形裁剪：

<file-pond
  image-crop-aspect-ratio="1"
  name="image"
  ref="pond"
/>

Vue Filepond 图像裁剪

Vue Filepond Image Crop

javascript

file-upload

image

vue.js

filepond