更新记录

1.0.0（2024-04-15）

vue2/vue3图片裁剪工具

平台兼容性

t-cropper

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

平台兼容

属性说明

mode有效值

事件说明

示例

<template>
  <view>
    <tt-cropper
      mode="ratio"
      :imageUrl="model.imageUrl"
      :width="500"
      :height="500"
      :radius="90"
      @cancel="onCancel"
      @confirm="onConfirm"
    ></tt-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="selectFile">选择图片</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      model: {
        imageUrl: "",
        resultUrl: [],
      },
    };
  },
  methods: {
    // 选择图片
    selectFile() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.model.imageUrl = res.tempFilePaths[0];
        },
      });
    },
    // 关闭
    onCancel() {
      this.model.imageUrl = "";
    },
    // 确定裁剪
    onConfirm(res) {
      const params = {
        id: new Date().getTime(),
        url: res.tempFilePath,
      };
      this.model.resultUrl.push(params);
      this.model.imageUrl = "";
    },
    // 预览图片
    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，但希望大家手下留情，不要轻易给差评！