uniapp实现图片裁剪

Uniapp可以通过引入第三方插件来实现图片裁剪功能，例如使用vue-cropper插件。

1. 安装vue-cropper插件
在项目根目录下打开命令行，输入以下命令安装vue-cropper插件。

npm install vue-cropper

2. 在页面中引入vue-cropper组件
在需要使用图片裁剪功能的页面中，引入vue-cropper组件。

<template>
  <div>
    <vue-cropper
      ref="cropper"
      :img="img"
      :outputSize="{width: 300, height: 300}"
      :outputType="'jpeg'"
      :autoCrop="'true'"
      :canMove="'true'"
      :canZoom="'true'"
      :center="'true'"
    ></vue-cropper>
    <button @click="cropImage">裁剪图片</button>
  </div>
</template>

<script>
import VueCropper from 'vue-cropper'

export default {
  components: {
    VueCropper
  },
  data() {
    return {
      img: ''
    }
  },
  methods: {
    cropImage() {
      this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
        // 处理裁剪后的图片blob数据
      })
    }
  }
}
</script>

3. 配置vue-cropper组件参数
在引入vue-cropper组件时，可以设置各种参数来达到自己的需求。常见的参数如下：

- img：待裁剪的图片地址
- outputSize：输出裁剪后图片的尺寸
- outputType：输出裁剪后图片的类型
- autoCrop：是否自动裁剪
- canMove：是否可以移动裁剪框
- canZoom：是否可以缩放裁剪框
- center：是否居中显示裁剪框

4. 裁剪图片
在点击裁剪按钮时，调用vue-cropper组件的getCroppedCanvas方法，获取裁剪后的图片blob数据。可以将blob数据上传到服务器或保存到本地。

this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
  // 处理裁剪后的图片blob数据
})