第一次上传
This commit is contained in:
@@ -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，但希望大家手下留情，不要轻易给差评！
|
||||
@@ -0,0 +1,150 @@
|
||||
const styles = (v ='') => v.split(';').filter(v => v && !/^[\n\s]+$/.test(v)).map(v => {
|
||||
const key = v.slice(0, v.indexOf(':'))
|
||||
const value = v.slice(v.indexOf(':')+1)
|
||||
return {
|
||||
[key
|
||||
.replace(/-([a-z])/g, function() { return arguments[1].toUpperCase()})
|
||||
.replace(/\s+/g, '')
|
||||
]: value.replace(/^\s+/, '').replace(/\s+$/, '') || ''
|
||||
}
|
||||
})
|
||||
export function parent(parent) {
|
||||
return {
|
||||
provide() {
|
||||
return {
|
||||
[parent]: this
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
el: {
|
||||
id: null,
|
||||
css: {},
|
||||
views: []
|
||||
},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
css: {
|
||||
handler(v) {
|
||||
if(this.canvasId) {
|
||||
this.el.css = (typeof v == 'object' ? v : v && Object.assign(...styles(v))) || {}
|
||||
this.canvasWidth = this.el.css && this.el.css.width || this.canvasWidth
|
||||
this.canvasHeight = this.el.css && this.el.css.height || this.canvasHeight
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export function children(parent, options = {}) {
|
||||
const indexKey = options.indexKey || 'index'
|
||||
return {
|
||||
inject: {
|
||||
[parent]: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
el: {
|
||||
handler(v, o) {
|
||||
if(JSON.stringify(v) != JSON.stringify(o))
|
||||
this.bindRelation()
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
src: {
|
||||
handler(v, o) {
|
||||
if(v != o)
|
||||
this.bindRelation()
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
text: {
|
||||
handler(v, o) {
|
||||
if(v != o) this.bindRelation()
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
css: {
|
||||
handler(v, o) {
|
||||
if(v != o)
|
||||
this.el.css = (typeof v == 'object' ? v : v && Object.assign(...styles(v))) || {}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
replace: {
|
||||
handler(v, o) {
|
||||
if(JSON.stringify(v) != JSON.stringify(o))
|
||||
this.bindRelation()
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if(!this._uid) {
|
||||
this._uid = this._.uid
|
||||
}
|
||||
Object.defineProperty(this, 'parent', {
|
||||
get: () => this[parent] || [],
|
||||
})
|
||||
Object.defineProperty(this, 'index', {
|
||||
get: () => {
|
||||
this.bindRelation();
|
||||
const {parent: {el: {views=[]}={}}={}} = this
|
||||
return views.indexOf(this.el)
|
||||
},
|
||||
});
|
||||
this.el.type = this.type
|
||||
if(this.uid) {
|
||||
this.el.uid = this.uid
|
||||
}
|
||||
this.bindRelation()
|
||||
},
|
||||
// #ifdef VUE3
|
||||
beforeUnmount() {
|
||||
this.removeEl()
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE2
|
||||
beforeDestroy() {
|
||||
this.removeEl()
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
removeEl() {
|
||||
if (this.parent) {
|
||||
this.parent.el.views = this.parent.el.views.filter(
|
||||
(item) => item._uid !== this._uid
|
||||
);
|
||||
}
|
||||
},
|
||||
bindRelation() {
|
||||
if(!this.el._uid) {
|
||||
this.el._uid = this._uid
|
||||
}
|
||||
if(['text','qrcode'].includes(this.type)) {
|
||||
this.el.text = this.$slots && this.$slots.default && this.$slots.default[0].text || `${this.text || ''}`.replace(/\\n/g, '\n')
|
||||
}
|
||||
if(this.type == 'image') {
|
||||
this.el.src = this.src
|
||||
}
|
||||
if (!this.parent) {
|
||||
return;
|
||||
}
|
||||
let views = this.parent.el.views || [];
|
||||
if(views.indexOf(this.el) !== -1) {
|
||||
this.parent.el.views = views.map(v => v._uid == this._uid ? this.el : v)
|
||||
} else {
|
||||
this.parent.el.views = [...views, this.el];
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.bindRelation()
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="" style="padding: 20rpx;">
|
||||
<view class=""
|
||||
style=" font-size: 40rpx; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; ">
|
||||
世界咖啡产区探秘：不同产地咖啡豆的风味特点
|
||||
</view>
|
||||
<view class="" style=" margin-top: 20rpx; display: flex; align-items: center; justify-content: space-between;">
|
||||
<view class="" style="display: flex; align-items: center;">
|
||||
<img :src="Service.GetIconImg('/static/article/date.png')" style="width: 25rpx; height: 25rpx;" alt="" />
|
||||
<text style="font-size: 24rpx; margin-left: 10rpx; color: #6B7280; " >2025-12-20</text>
|
||||
</view>
|
||||
<view class="" style="display: flex; align-items: center;">
|
||||
<img :src="Service.GetIconImg('/static/article/see.png')" style="width: 28rpx; height: 26rpx;" alt="" />
|
||||
<text style="font-size: 24rpx; margin-left: 10rpx; color: #6B7280; " >2025</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="" style="margin-top: 30rpx;" >
|
||||
内容
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onShow, onLoad } from "@dcloudio/uni-app";
|
||||
import { Service } from "@/Service/Service"
|
||||
onLoad(() => {
|
||||
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
Reference in New Issue
Block a user