vue-advanced-cropper 非常宽的图像

Question

我正在使用 vue2 的 vue-advanced-cropper 插件。到目前为止它工作正常，但当我上传一个高度很小的很宽的图像时，我遇到了一个问题。我有一个 240x240 像素的区域，我想在其中裁剪上传的图像。所以图像的宽度< 240 should be resized to 240 and also an image with height < 240 should be resized so that it always fits into my 240x240 canvas.

我怎样才能实现这个目标？对于宽度，它似乎是开箱即用的，但是当我上传非常宽的图像时，结果如下所示：

我似乎无法让它工作，我尝试了 imageRestriction="fill-area" 或 imageRestriction="fit-area" 这绝对没有区别。

这是我的代码：

<template>
    <div
        class="cropper-container"
        :style="{width: '240px', height: '240px'}"
    >
            
            <cropper
                :src="image.src"
                :check-orientation="false"
                @change="imageChange"
            />

            <div class="cropper-info-icon">
                <info-icon :text="'info icon text'" />
            </div>
    </div>
</template>

image.src 是一个 blob，没什么特别的。我怎样才能实现这个目标？

Answer 1

vue-advanced-cropper中有一个预定义的类，它将获取默认上传的图像高度（即使你定义了容器的高度，容器也会采用默认图像高度），你可以通过添加 max-height 来解决它，例如：

<div class="fullscreen-cropper" @click="closeFullScreen">
     <div class="cropper-content" @click.stop>
         <Cropper v-if="selectedImage" ref="cropper" class="cropper" :src="selectedImage" :stencil-component="$options.components.Stencil" />
          <div class="button-wrapper">
              <button @click="closeFullScreen" class="btn btn-outline-danger btn-sm">cancel</button>
               <button @click="uploadImage" class="btn btn-outline-success btn-sm">Crop & Upload</button>
           </div>
     </div>
</div>
<style scoped>
.fullscreen-cropper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}

.cropper-content {
    background: white;
    padding: 20px;
    border-radius: 5px;
    max-width: 70%;
    max-height: 99vh;
    z-index: 100001;
    position: relative;
}

.cropper {
    background: white;
    max-width: 100%;
    max-height: 90vh;
    z-index: 100001;
}

.button-wrapper {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.cropped-image {
    margin-top: 20px;
}

.cropped-image img {
    width: 100%;
    height: auto;
    max-height: 50%;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #000;
    padding: 5px;
    outline: none;
}
</style>