ll

liukangdong

2024-09-30 88447596b1d87bc9628b60d39659fe183825ad85

 admin/src/components/common/ImageCropper.vue

@@ -19,7 +19,7 @@
          ></vue-cropper>
        </div>
        <div class="previews">
          <img style="width: 100px;height: 100px;border-radius: 50%;object-fit: cover" :src="cutImgSrc" alt="图片">
          <img style="width: 150px;height: 150px;border-radius1: 50%;object-fit: cover" :src="cutImgSrc" alt="图片">
        </div>
      </div>
    </div>
@@ -74,11 +74,11 @@
        autoCrop: true,
        canMove: false,
        centerBox: true,
        height: 300,
        width: 300,
        outputSize:{width: 300, height: 300},
        autoCropWidth: 300,
        autoCropHeight: 300,
        height: 500,
        width: 500,
        outputSize:{width: 500, height: 500 },
        autoCropWidth: 500,
        autoCropHeight: 500,
        fixed: true,
        fixedNumber: [1, 1]
      },
@@ -95,7 +95,7 @@
  },
  methods: {
    getImagecropper(){
      return  this.$refs.cropper
      return this.$refs.cropper
    },
    // 学习截图框变化事件
    realTime (data) {
@@ -171,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;
        }
@@ -187,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%;
        }
      }