更新记录

1.0.5（2023-11-16）

优化裁剪框圆角/裁剪图片圆角，更新了文档

1.0.4（2023-11-14）

支持图片最大缩放功能，优化App端图标问题，

1.0.3（2023-11-11）

新增图片旋转图标rotate.svg

平台兼容性

t-cropper

t-cropper 一款高性能移动端图片裁剪工具

平台兼容

属性说明

mode有效值

事件说明

示例

<template>
  <view>
    <t-cropper
      mode="ratio"
      :imageUrl="model.imageUrl"
      :width="500"
      :height="500"
      :radius="90"
      @cancel="onCancel"
      @confirm="onConfirm"
    ></t-cropper>
    <view class="preview">
      <image
        v-for="(item, index) in model.resultUrl"
        :key="item.id"
        class="images"
        @click="prviewImgae(index, item.url)"
        :src="item.url"
      />
    </view>
    <button class="button" type="primary" @click="select">选择图片</button>
  </view>
</template>

<script setup>
import { reactive, toRefs } from "vue";
var model = reactive({
  imageUrl: "",
  resultUrl: [],
});

let { resultUrl } = toRefs(model);

const select = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      model.imageUrl = res.tempFilePaths[0];
    },
  });
};

const onCancel = () => {
  model.imageUrl = "";
};

const onConfirm = (res) => {
  // 设置url的值，显示控件
  const params = {
    id: new Date().getTime(),
    url: res.tempFilePath,
  };
  model.resultUrl.push(params);
  model.imageUrl = "";
};

const prviewImgae = (index, url) => {
  uni.previewImage({
    current: index, // 当前资源下标
    urls: [url],
  });
};
</script>

<style lang="scss" scoped>
.preview {
  padding: 32rpx;

  .images {
    margin: 10rpx;
    width: 200rpx;
    height: 200rpx;
  }
}
.button {
  margin: 0 20rpx;
}
</style>

注意

1.uni-app版本不断更新，插件有时无法适应新版本，感谢大家及时提交bug，但希望大家手下留情，不要轻易给差评！