# ImgCropper 图片裁切

<el-button @click="showImgCropper">开始裁切</el-button>
<div v-if="previewVisible" class="preview-wrapper" :style="cropperStyle">
  <img :src="imgUrl" :style="imgStyle" />
</div>
<h-img-cropper
  :visible.sync="cropperVisible"
  :url="imgUrl"
  :size="{width: `${corpperWidth}`, height: `${corpperHeight}`}"
  @crop-complete="cropCompleteHandler"
></h-img-cropper>
<script>
  export default {
    data() {
      return {
        imgUrl: require('./assets/img/img-carousel/14.jpg'),
        corpperWidth: 300,
        corpperHeight: 300,
        cropperVisible: false,
        previewVisible: false,
        cropInfo: null
      };
    },
    computed: {
      imgStyle() {
        return {
          width: `${this.cropInfo.imgWidth}px`,
          height: `${this.cropInfo.imgHeight}px`,
          transform: this.cropInfo.transform,
          maxWidth: 'initial'
        };
      },
      cropperStyle() {
        return {
          width: `${this.corpperWidth}px`,
          height: `${this.corpperHeight}px`,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          overflow: 'hidden'
        };
      }
    },
    methods: {
      showImgCropper() {
        this.cropperVisible = true;
      },
      cropCompleteHandler(cropInfo) {
        console.log(cropInfo);
        this.cropInfo = cropInfo;
        this.previewVisible = true;
      }
    }
  };
</script>

<el-button @click="showImgCropper">开始裁切</el-button>
<div v-if="previewVisible" class="preview-wrapper" :style="cropperStyle">
  <img :src="imgUrl" :style="imgStyle" />
</div>
<h-img-cropper
  :visible.sync="cropperVisible"
  :url="imgUrl"
  :size="{width: `${corpperWidth}`, height: `${corpperHeight}`}"
  @crop-complete="cropCompleteHandler"
></h-img-cropper>
<script>
  export default {
    data() {
      return {
        imgUrl2: '',
        corpperWidth: 300,
        corpperHeight: 300,
        cropperVisible2: false,
        previewVisible2: false,
        cropInfo2: null
      };
    },
    computed: {
      imgStyle2() {
        return {
          width: `${this.cropInfo2.imgWidth}px`,
          height: `${this.cropInfo2.imgHeight}px`,
          transform: this.cropInfo2.transform,
          maxWidth: 'none',
          flex: 'none',
          position: 'absolute',
          top: '50%',
          left: '50%'
        };
      },
      cropperStyle2() {
        return {
          position: 'relative',
          width: `${this.corpperWidth}px`,
          height: `${this.corpperHeight}px`,
          overflow: 'hidden'
        };
      }
    },
    methods: {
      cropCompleteHandler2(cropInfo) {
        this.cropInfo2 = cropInfo;
        this.previewVisible2 = true;
      },
      onChangeHandler(file) {
        this.imgUrl2 = file.url;
        this.cropperVisible2 = true;
      }
    }
  };
</script>