htc 7cd2b30e39 头像上传前裁剪 1 napja
..
components 7cd2b30e39 头像上传前裁剪 1 napja
static 7cd2b30e39 头像上传前裁剪 1 napja
changelog.md 7cd2b30e39 头像上传前裁剪 1 napja
package.json 7cd2b30e39 头像上传前裁剪 1 napja
readme.md 7cd2b30e39 头像上传前裁剪 1 napja

readme.md

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,但希望大家手下留情,不要轻易给差评!