Vue-advanced-cropper 自定义滑块可放大和缩小

Question

我正在为“vue-advanced-cropper”工具开发一个自定义缩放滑块，它允许用户裁剪图像。滑块当前可以完美放大，但不允许用户缩小。它需要能够放大和缩小以准确地调整图像。我需要解决阻止缩小的问题，让用户能够完全控制他们的图像。

          <Cropper
                ref="$cropper"
                :src="logo.src"
                :default-position="{ top: 0, left: 0 }"
                :default-size="
                  ({ imageSize }) => ({
                    width: imageSize.width,
                    height: imageSize.height,
                  })
                "
                class="cropper"
                backgroundClass="cropper-background"
                :image="image" 
                auto-zoom
                @change="cropperOnChange"
              />
            </div>
            <ZoomSlider @zoom-changed="handleZoomChange" />

脚本

export default {
components: {
  ZoomSlider
},
data() {
  return {
    image: null, 
  }
},
methods: {
  handleZoomChange(newZoomLevel) {
  this.zoomLevel = newZoomLevel;
  
  // Ensure that zoom level is within valid bounds, e.g., 0.1 to 3.0
  const minZoomLevel = 0.1;
  const maxZoomLevel = 5.0;
  this.zoomLevel = Math.min((minZoomLevel, this.zoomLevel), Math.max(maxZoomLevel, this.zoomLevel));
  
  // Apply the zoom level to the cropper
  this.$refs.$cropper.zoom(this.zoomLevel);
},
}
}

滑块组件

    <template>
    <div>
      <input type="range" :max="maxZoom" :min="minZoom" v-model="zoomLevel" />
      <span>{{ zoomLevel }}</span>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      maxZoom: {
        type: Number,
        default: 5
      },
      minZoom: {
        type: Number,
        default: 0  
      }
    },
    data() {
      return {
        zoomLevel: 0
      }
    },
    watch: {
      zoomLevel(newZoom) {
        this.$emit('zoom-changed', newZoom)
      }
    }
  }
  </script>

感谢您的帮助！如果我没有提供足够的信息，请告诉我。

Answer 1

目前正在开发滑块，这非常棘手，现在不太好。 但这不是一个级别的缩放，我是否理解它是一个相对缩放。

我在我的项目中做了类似的事情

watch(zoom, (value, previous) => {
    if (value < previous) {
        console.log('zoom out');

        cropper.value?.zoom(0.8);
    }
    else {
        console.log('zoom in');
        cropper.value?.zoom(1.2);
    }
});

数字比之前大，则从当前缩放 1.2 向内缩放，如果更小，则从 0.8 缩小