|
@@ -0,0 +1,184 @@
|
|
|
+# 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 |点击取消按钮 | - |
|
|
|
+
|
|
|
+### 示例
|
|
|
+
|
|
|
+```html
|
|
|
+<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,但希望大家手下留情,不要轻易给差评!
|