FilePond 和 Doka 与 Vue.js - 错误的初始裁剪区域

如何解决FilePond 和 Doka 与 Vue.js - 错误的初始裁剪区域

我使用 FilePond Uploader 和 Doka 进行高级图像裁剪，使用 Vue.js 进行前端。

几乎一切正常。 我可以上传图像并使用 Doka 进行裁剪。

但是我有一个问题要解决： 当多卡打开时，它会显示图像预览和初始裁剪区域。 但裁剪区域始终与图像的整个尺寸相同。

只要我点击裁剪区域的一个角，裁剪区域就会缩小到正确的大小（小于图像尺寸）。

我为 Filepond 使用 imageCropAspectRatio 参数，为 Doka 使用cropAspectRatio 参数。

当裁剪工具出现时，如何让 Doka 图像裁剪器知道正确的裁剪区域？

感谢任何帮助。

这是我的 Vue 组件：

<template>
  <div class="flex flex-row w-full">
    <div class="flex-grow">
      Background image

      <button
        v-if="!cropping && !uploading"
        type="button"
        :disabled="sending"
        class="block mt-6 items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white hover:text-brandhelfer-green bg-brandhelfer-green hover:bg-white focus:outline-none focus:ring-brandhelfer-green focus:border-brandhelfer-green active:bg-brandhelfer-green transition duration-150 ease-in-out"
        @click="browseFiles"
      >
        browse
      </button>

      <file-pond
        v-show="!cropping && uploading"
        class="mt-6"
        name="backgroundImage"
        ref="backgroundImagePond"
        :server="backgroundImagePondServerOptions"
        :imageEditEditor="backgroundImageDoka"
        :imageEditInstantEdit="true"
        :imageEditAllowEdit="true"
        :allowDrop="false"
        :allowbrowse="true"
        :maxFiles="1"
        credits=""
        :acceptedFileTypes="['image/jpeg']"
        imageValidateSizeLabelImageSizetooSmall="The image is too small"
        imageValidateSizeLabelExpectedMinSize="Min: {minWidth} × {minHeight} px"
        @init="handleFilePondInit"
        @addfilestart="handleAddFileStart"
        @addfile="handleAddFile"
        @processfile="handleProcessFile"
        :labelIdle="backgroundImagePondLabels['idle']"
        :imageCropAspectRatio="imageCropAspectRatio"
      />
    </div>
    <div class="w-1/5">
      <toggle
        idx="0"
        :sending="sending"
        @toggled="statusToggled"
        :enabled="backgroundImageStatus === true"
      ></toggle>
    </div>
  </div>
</template>

<script>
import Toggle from '@/Shared/Toggle';

// Import Doka
import { create } from '@/libs/doka/doka.esm.min';
import '@/libs/doka/doka.min.css';

import vueFilePond from 'vue-filepond';
import 'filepond/dist/filepond.min.css';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
import 'filepond-plugin-image-edit/dist/filepond-plugin-image-edit.min.css';
import FilePondpluginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePondpluginImagePreview from 'filepond-plugin-image-preview';
import FilePondpluginImageEdit from 'filepond-plugin-image-edit';
import FilePondpluginImageTransform from 'filepond-plugin-image-transform';
import FilePondpluginFileEncode from 'filepond-plugin-file-encode';
import FilePondpluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
import FilePondpluginImageValidateSize from 'filepond-plugin-image-validate-size';
import FilePondpluginImageCrop from 'filepond-plugin-image-crop';
import FilePondpluginImageResize from 'filepond-plugin-image-resize';
import FilePondpluginFileMetadata from 'filepond-plugin-file-Metadata';


const FilePond = vueFilePond(
  FilePondpluginFileValidateType,FilePondpluginImagePreview,FilePondpluginImageEdit,FilePondpluginImageTransform,FilePondpluginFileEncode,FilePondpluginImageExifOrientation,FilePondpluginImageValidateSize,FilePondpluginImageCrop,FilePondpluginImageResize,FilePondpluginFileMetadata
);

export default {
  components: {
    Toggle,FilePond,},props: {
    backgroundImage: Object,data() {
    return {
      sending: false,cropping: false,uploading: false,uploadedBackgroundImage: null,backgroundImageStatus: false,imageCropAspectRatio: `${this.backgroundImage.width}:${this.backgroundImage.height}`,backgroundImagePondServerOptions: {
        url: '/background-image/upload',process: {
          headers: {
            'X-CSRF-TOKEN': document.head.querySelector(
              'Meta[name="csrf-token"]'
            ).content,onload: (response) => {
            this.uploadedBackgroundImage = response;
          },backgroundImagePondLabels: {
        idle: '',imageValidateSizeLabelImageSizetooSmall: 'The image is too small',imageValidateSizeLabelExpectedMinSize:
          'Min: {minWidth} × {minHeight} px',backgroundImageDoka: create({
        utils: ['crop','filter','color'],cropAspectRatio:
          this.backgroundImage.height / this.backgroundImage.width,cropShowSize: true,imagePreviewScaleMode: 'crop',cropMinImageWidth: this.backgroundImage.width,outputWidth: this.backgroundImage.width,outputHeight: this.backgroundImage.height,outputQuality: 100,outputFit: 'contain',outputData: true,onconfirm: (output) => {
          this.cropping = false;
        },oncancel: () => {
          this.cropping = false;
        },}),};
  },methods: {
    handleAddFileStart: function () {
      this.cropping = true;
    },handleAddFile: function () {
      this.uploading = true;
    },handleProcessFile: function () {
      this.uploading = false;

      this.backgroundImageStatus = true;

      this.$emit('imageUploaded',this.uploadedBackgroundImage);
    },browseFiles: function () {
      this.$refs.backgroundImagePond.browse();
    },statusToggled(idx,status) {
      this.$emit('statusToggled',status);
    },};
</script>

<style scoped>
.filepond--panel-root {
  background-color: transparent !important;
}
</style>