mp-cropper 图片裁剪

该组件从 uni-app 插件市场移植，更具体的参数及更新请参考：ksp-cropper

代码演示

<script setup>
import {ref} from 'vue'
import {useToggle} from '@vueuse/core'
import {chooseImage} from '@ifanrx/uni-mp'

const src = ref(null)

const [showCropper, toggleShowCropper] = useToggle(false)

async function uploadImage() {
  const {tempFiles} = await chooseImage(1, ['album'])

  if (!tempFiles.length) return

  const url = tempFiles[0].tempFilePath

  src.value = url

  toggleShowCropper(true)
}

function onCropperOk() {
  toggleShowCropper(false)
}

function onCropperCancel() {
  toggleShowCropper(false)
}
</script>

<template>
  <mp-nav-bar title="mp-cropper" />

  <button @click="uploadImage">upload image</button>

  <view v-if="showCropper">
    <mp-cropper
      ref="cropper"
      borderColor="#cdcdcd"
      buttonColor="#909090"
      mode="free"
      :url="src"
      :width="300"
      @cancel="onCropperCancel"
      @confirm="onCropperOk"
    />
  </view>
</template>

API

Props

Prop name	Description	Type	Values	Default
mode	裁剪模式	string	-	'free'
url	图片路径	string	-	''
width	宽度	number	-	200
height	高度	number	-	200
maxWidth	最大宽度	number	-	1024
maxHeight	最大高度	number	-	1024
borderColor	边框颜色	string	-	'#ffffff'
buttonColor	确认按钮颜色	string	-	'#42b983'

Events

Event name	Properties	Description
cancel		点击取消时触发
confirm	path string - 图片路径	点击确认时触发

源码

组件 • 示例