AiToyCXWx/uni_modules/tt-cropper

t-cropper

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

平台兼容

App	H5	微信小程序	支付宝小程序
√	√	√	√

属性说明

属性	类型	默认	备注
mode	String	"ratio"	裁剪模式
imageUrl	String	" "	需要裁剪的图片路径
width	Number	200	图片裁剪后的宽度，固定大小时有效
height	Number	200	图片裁剪后的高度，固定大小时有效
maxWidth	Number	1024	图片裁剪后的最大宽度
maxHeight	Number	1024	图片裁剪后的最大高度
scaleRatio	Number	0.7	裁剪比列缩放,建议不超过0.95
minRatio	Number	1	最小缩放
maxRatio	Number	3	最大缩放
radius	Number	0	裁剪图片圆角半径，单位px
delay	Number	250	确定按钮快速重复点击时间
isRotateBtn	Boolean	true	是否显示旋转按钮
isCutSize	Boolean	true	是否导出高清裁剪原图(h5)

mode有效值

模式	值	说明
固定模式	fixed	裁剪出指定大小的图片，一般用于头像上传
等比缩放	ratio	限定宽高比，裁剪大小不固定
自由模式	free	不限定宽高比，裁剪大小不固定

事件说明

事件名称	说明	返回
confirm	点击确定按钮	object
cancel	点击取消按钮	-

示例

<template>
  <view>
    <tt-cropper
      mode="ratio"
      :imageUrl="model.imageUrl"
      :width="500"
      :height="500"
      :radius="90"
      :delay="300"
      @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: {
    // 使用uni.compressImage压缩图片
    compressImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original'],
        success: (res) => {
          uni.showLoading({
            title: "处理中...",
            mask: true,
          });
          // 使用uni.compressImage压缩图片
          uni.compressImage({
            src: res.tempFilePaths[0],
            quality: 80, // 压缩质量
            success: (compressRes) => {
              this.model.imageUrl = compressRes.tempFilePath;
            },
            fail: (err) => {
              console.error("图片压缩失败：", err);
            },
            complete: () => {
              uni.hideLoading(); // 关闭loading
            },
          });
        },
      });
    },
    // 使用默认压缩方式
    defaultCompressImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        success: (res) => {
          this.model.imageUrl = res.tempFilePaths[0];
        },
      });
    },
    /**
     *** 特别声明：在使用uni.chooseImage选择的大图片文件无法直接在Image组件中显示，通常涉及到以下可能的问题和限制。
     *** 图片大小和尺寸限制：移动设备和浏览器对于能够加载和处理的图片大小有限制，如果选择的图片文件尺寸过大，可能无法正常加载和显示。
     *** 性能问题：大图片文件可能会导致页面加载缓慢或者卡顿，尤其是在移动设备上。
     *** 内存问题：加载大图片可能会消耗大量的内存资源，特别是在移动设备上，可能导致内存不足或者页面崩溃的问题。
     *** 解决参考方案如下：
     *** 防止选择大文件图片后无法在Image中直接临时路径显示图片，导致无法在裁剪插件中显示，
     *** 根据项目需要对大尺寸图片进行压缩、对图片质量要求高的，需要提前上传至oss进行采用网络图片进行裁剪。
     */
    selectFile() {
      // 推荐使用其他压缩方式：这里只是简单对大文件图片压缩-仅供思路参考，切勿使用该方式
      // 示例一：uni.compressImage压缩图片
      // this.compressImage();

      // 示例二：使用自带压缩图
      this.defaultCompressImage();
    },

    // 关闭
    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，但希望大家手下留情，不要轻易给差评！