rk
2025-09-29 218e84d2264e413f31a2f3957f05bb7b8ad42d5d
admin/src/components/common/ImageCropper.vue
@@ -6,9 +6,12 @@
          <vue-cropper
              ref="cropper"
              :img="imgSrc"
              :width="options.width"
              :height="options.height"
              :canScale="options.canScale"
              :autoCrop="options.autoCrop"
              :canMove="options.canMove"
              :output-size="options.outputSize"
              :centerBox="options.centerBox"
              :autoCropWidth="options.autoCropWidth"
              :autoCropHeight="options.autoCropHeight"
@@ -16,12 +19,7 @@
          ></vue-cropper>
        </div>
        <div class="previews">
          <img style="width: 100px;height: 100px;border-radius: 50%;object-fit: cover" :src="cutImgSrc" alt="图片">
          <!--          <el-image-->
          <!--            v-if="cutImgSrc"-->
          <!--            style="width: 100px; height: 100px;vertical-align: middle;border-radius: 50%;"-->
          <!--            :src="cutImgSrc"-->
          <!--            fit="fill"></el-image>-->
          <img style="width: 150px;height: 150px;border-radius1: 50%;object-fit: cover" :src="cutImgSrc" alt="图片">
        </div>
      </div>
    </div>
@@ -76,8 +74,11 @@
        autoCrop: true,
        canMove: false,
        centerBox: true,
        autoCropWidth: 200,
        autoCropHeight: 200,
        height: 500,
        width: 500,
        outputSize:{width: 500, height: 500 },
        autoCropWidth: 500,
        autoCropHeight: 500,
        fixed: true,
        fixedNumber: [1, 1]
      },
@@ -94,7 +95,7 @@
  },
  methods: {
    getImagecropper(){
      return  this.$refs.cropper
      return this.$refs.cropper
    },
    // 学习截图框变化事件
    realTime (data) {
@@ -170,10 +171,12 @@
.iconShot {
  .icon-dialog {
    .clip {
      display: flex;
      .img {
        height: 400px;
        flex: 7.5;
        height: 500px;
        //float: left;
        // display: inline-block;
        .vue-cropper {
          background-image: none;
        }
@@ -186,13 +189,15 @@
      }
      .previews {
        width: 100%;
        height: 100px;
        position: relative;
        //width: 100px;
        flex: 2.5;
        //float: right;
        height: 200px;
        //position: relative;
        >img {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          //position: absolute;
          //left: 50%;
          transform: translate(35%, 50px);
          max-height: 100%;
        }
      }