uniapp에서 이미지 자르기 및 이미지 처리를 구현하는 방법

npm install uni-image-cropper

<template>
  <view>
    <uni-image-cropper 
      :src="imageSrc"
      :width="width"
      :height="height"
      :mode="mode"
      @imageCrop="handleImageCrop"
    ></uni-image-cropper>
  </view>
</template>

<script>
import uniImageCropper from 'uni-image-cropper';

export default {
  data() {
    return {
      imageSrc: '',
      width: 300,
      height: 300,
      mode: 'rectangle'
    };
  },
  methods: {
    handleImageCrop(event) {
      const { target, detail } = event;
      console.log('裁剪后的图片路径：', detail.path);
    }
  },
  mounted() {
    uniImageCropper.init({
      debug: false
    });
  }
};
</script>

npm install uni-cropper

<template>
  <view>
    <uni-cropper
      :width="width"
      :height="height"
      :src="imageSrc"
      @imageLoad="handleImageLoad"
      @imageProcessed="handleImageProcessed"
    ></uni-cropper>
  </view>
</template>

<script>
import uniCropper from 'uni-cropper';

export default {
  data() {
    return {
      imageSrc: '',
      width: 300,
      height: 300
    };
  },
  methods: {
    handleImageLoad(event) {
      const { target, detail } = event;
      console.log('图片加载完成');
    },
    handleImageProcessed(event) {
      const { target, detail } = event;
      console.log('图片处理完成', detail.path);
    }
  },
  mounted() {
    uniCropper.init({
      debug: true
    });
  }
};
</script>