uniapp上传图片前本地可视化拖拽裁剪图片？

在 uniapp 中实现上传图片前的本地可视化拖拽裁剪功能，我们可以使用第三方插件或自己实现一个简单的裁剪组件。以下是使用 vue-cropper 插件的方法，这个插件在 uniapp 中也可以使用：

npm install vue-cropper@next

<template>
  <view class="container">
    <button @tap="chooseImage">选择图片</button>
    <view v-if="imageSrc" class="cropper-container">
      <vue-cropper
        ref="cropper"
        :img="imageSrc"
        :outputSize="1"
        :outputType="outputType"
        :info="true"
        :full="true"
        :canMove="true"
        :canMoveBox="true"
        :original="false"
        :autoCrop="true"
        :autoCropWidth="200"
        :autoCropHeight="200"
        :fixedBox="true"
      ></vue-cropper>
    </view>
    <button v-if="imageSrc" @tap="cropImage">裁剪并上传</button>
  </view>
</template>

<script>
import { VueCropper } from 'vue...

点击查看剩余70%