我的页和设置页完成
This commit is contained in:
田岩
@@ -0,0 +1,18 @@
|
||||
## 1.0.8（2024-09-13）
|
||||
新增矩形框最大缩放、修复图片旋转时居中
|
||||
## 1.0.7（2024-08-08）
|
||||
优化选择大文件图片后，无法在Image中直接显示图片，提供针对大图片压缩思路
|
||||
## 1.0.6（2024-06-16）
|
||||
优化确定按钮，快速重复点击出现多个裁剪图片,更新了文档
|
||||
## 1.0.5（2023-11-16）
|
||||
优化裁剪框圆角/裁剪图片圆角，更新了文档
|
||||
## 1.0.4（2023-11-14）
|
||||
支持图片最大缩放功能，优化App端图标问题，
|
||||
## 1.0.3（2023-11-11）
|
||||
新增图片旋转图标rotate.svg
|
||||
## 1.0.2（2023-11-11）
|
||||
新增H5端和App端（Android端通过自测，Ios端没有设备暂未自测）
|
||||
## 1.0.1（2023-11-10）
|
||||
新增项目示例
|
||||
## 1.0.0（2023-11-10）
|
||||
图片裁剪工具
|
||||
@@ -0,0 +1,202 @@
|
||||
$clipper-edge-border-width: 6rpx !default;
|
||||
|
||||
.t-cropper {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
.canvas {
|
||||
position: absolute;
|
||||
top: 5000px;
|
||||
left: 5000px;
|
||||
}
|
||||
// 裁剪区域
|
||||
.t-preview-container {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.preview-body {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
.mask-model {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: #000;
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
}
|
||||
.image-wrap {
|
||||
position: absolute;
|
||||
.image {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
// 裁剪框盒子
|
||||
.frame-box {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
top: 100px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
// 矩形图片
|
||||
.rect {
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: -2px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 2rpx solid white;
|
||||
overflow: hidden;
|
||||
box-sizing: content-box;
|
||||
.image-rect {
|
||||
position: absolute;
|
||||
.rect-img {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
//裁剪框线条
|
||||
.line-one {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
border-top: 1px dashed #ccc;
|
||||
left: 0;
|
||||
top: 33.3%;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.line-two {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
border-top: 1px dashed #ccc;
|
||||
left: 0;
|
||||
top: 66.7%;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.line-three {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
border-right: 1px dashed #ccc;
|
||||
top: 0;
|
||||
left: 33.3%;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.line-four {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
border-right: 1px dashed #ccc;
|
||||
top: 0;
|
||||
left: 66.7%;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.frame-left-top {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
left: -8rpx;
|
||||
top: -8rpx;
|
||||
border-left: 4rpx solid #fff;
|
||||
border-top: 4rpx solid #fff;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.frame-left-bottom {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
left: -8rpx;
|
||||
bottom: -4rpx;
|
||||
border-left: 4rpx solid #fff;
|
||||
border-bottom: 4rpx solid #fff;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.frame-right-top {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
right: -4rpx;
|
||||
top: -8rpx;
|
||||
border-right: 4rpx solid #fff;
|
||||
border-top: 4rpx solid #fff;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.frame-right-bottom {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
right: -4rpx;
|
||||
bottom: -4rpx;
|
||||
border-right: 4rpx solid #fff;
|
||||
border-bottom: 4rpx solid #fff;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 底部工具栏
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
width: calc(100% - 64rpx);
|
||||
height: 100rpx;
|
||||
left: 0;
|
||||
bottom: 10rpx;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 32rpx;
|
||||
align-items: center;
|
||||
// IOS 底部安全距离
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
.btn-cancel {
|
||||
width: 112rpx;
|
||||
font-size: 28rpx;
|
||||
color: #d5dfe5;
|
||||
font-weight: bold;
|
||||
}
|
||||
.btn-rotate {
|
||||
width: 112rpx;
|
||||
font-size: 28rpx;
|
||||
color: #d5dfe5;
|
||||
font-weight: bold;
|
||||
image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
}
|
||||
.btn-confirm {
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
width: 112rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
background: #07c160;
|
||||
border-radius: 6rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.transit {
|
||||
transition: width 0.3s, height 0.3s, left 0.3s, top 0.3s, transform 0.3s;
|
||||
}
|
||||
}
|
||||
.showPage {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,85 @@
|
||||
{
|
||||
"id": "t-cropper",
|
||||
"displayName": "t-cropper图片裁剪插件",
|
||||
"version": "1.0.8",
|
||||
"description": "vue3图片裁剪插件，头像裁剪、支持自定义尺寸、等比例缩放、拖动、图片翻转、剪切圆形/圆角图片，高性能裁剪图片插件",
|
||||
"keywords": [
|
||||
"图片裁剪",
|
||||
",头像裁剪,缩放,旋转,拖动",
|
||||
""
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y",
|
||||
"alipay": "n"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "n",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "u",
|
||||
"app-uvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "u",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "u",
|
||||
"Safari": "u"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,186 @@
|
||||
# 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 | 是否显示旋转按钮 |
|
||||
|
||||
### mode有效值
|
||||
|
||||
| 模式 |值 |说明 |
|
||||
| :-----: | :-----: | :----: |
|
||||
| 固定模式 |fixed | 裁剪出指定大小的图片，一般用于头像上传 |
|
||||
| 等比缩放 |ratio | 限定宽高比，裁剪大小不固定 |
|
||||
| 自由模式 |free | 不限定宽高比，裁剪大小不固定 |
|
||||
|
||||
### 事件说明
|
||||
|
||||
|事件名称 |说明 |返回 |
|
||||
| :--------: | :-----: | :----: |
|
||||
| confirm |点击确定按钮 | object |
|
||||
| cancel |点击取消按钮 | - |
|
||||
|
||||
### 示例
|
||||
|
||||
```html
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<t-cropper
|
||||
mode="ratio"
|
||||
:imageUrl="imageUrl"
|
||||
:width="500"
|
||||
:height="500"
|
||||
:radius="100"
|
||||
:delay="150"
|
||||
@cancel="onCancel"
|
||||
@confirm="onConfirm"
|
||||
></t-cropper>
|
||||
<view class="preview">
|
||||
<image
|
||||
v-for="(item, index) in 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 setup>
|
||||
import { reactive, toRefs } from "vue";
|
||||
const model = reactive({
|
||||
imageUrl: "",
|
||||
resultUrl: [],
|
||||
});
|
||||
|
||||
const { resultUrl, imageUrl } = toRefs(model);
|
||||
|
||||
// 使用uni.compressImage压缩图片
|
||||
const compressImage = () => {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: "original",
|
||||
success: (res) => {
|
||||
console.log("original", res);
|
||||
// 示例：防止大图片文件的Image无法直接临时路径显示图片
|
||||
uni.showLoading({
|
||||
title: "处理中...",
|
||||
mask: true,
|
||||
});
|
||||
// 使用uni.compressImage压缩图片
|
||||
uni.compressImage({
|
||||
src: res.tempFilePaths[0],
|
||||
quality: 80, // 压缩质量
|
||||
success: (compressRes) => {
|
||||
model.imageUrl = compressRes.tempFilePath;
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error("图片压缩失败：", err);
|
||||
},
|
||||
complete: () => {
|
||||
uni.hideLoading(); // 关闭loading
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 使用默认压缩方式
|
||||
const defaultCompressImage = () => {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: "compressed",
|
||||
success: (res) => {
|
||||
model.imageUrl = res.tempFilePaths[0];
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
*** 特别声明：在使用 uni.chooseImage 选择的大图片文件无法直接在 Image 组件中显示，通常涉及到以下可能的问题和限制。
|
||||
*** 图片大小和尺寸限制：移动设备和浏览器对于能够加载和处理的图片大小有限制，如果选择的图片文件尺寸过大，可能无法正常加载和显示。
|
||||
*** 性能问题：大图片文件可能会导致页面加载缓慢或者卡顿，尤其是在移动设备上。
|
||||
*** 内存问题：加载大图片可能会消耗大量的内存资源，特别是在移动设备上，可能导致内存不足或者页面崩溃的问题。
|
||||
*** 解决参考方案如下：
|
||||
*** 防止选择大文件图片后无法在Image中直接临时路径显示图片，导致无法在裁剪插件中显示，
|
||||
*** 根据项目需要对大尺寸图片进行压缩、对图片质量要求高的，需要提前上传至oss进行采用网络图片进行裁剪。
|
||||
*/
|
||||
const selectFile = () => {
|
||||
// 推荐使用其他压缩方式，这里只是简单大图片压缩示例-经供思路参考切勿使用
|
||||
// 示例一：uni.compressImage压缩图片
|
||||
// compressImage();
|
||||
|
||||
// 示例二：使用自带压缩图
|
||||
defaultCompressImage();
|
||||
};
|
||||
|
||||
// 关闭裁剪
|
||||
const onCancel = () => {
|
||||
model.imageUrl = "";
|
||||
};
|
||||
|
||||
// 裁剪确认
|
||||
const onConfirm = (res) => {
|
||||
// 设置url的值，显示控件
|
||||
const params = {
|
||||
id: new Date().getTime(),
|
||||
url: res.tempFilePath,
|
||||
};
|
||||
model.resultUrl.push(params);
|
||||
model.imageUrl = "";
|
||||
};
|
||||
|
||||
// 预览图片
|
||||
const 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,15 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="30px" height="30px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:none;stroke:#FFFFFF;stroke-width:2.4306;stroke-miterlimit:10;}
|
||||
.st1{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M17.1,24.2h-12c-0.2,0-0.3-0.2-0.3-0.3v-9.3c0-0.2,0.2-0.3,0.3-0.3h12c0.2,0,0.3,0.2,0.3,0.3v9.3
|
||||
C17.5,24.1,17.3,24.2,17.1,24.2z"/>
|
||||
<path class="st0" d="M16.6,5.4c4.8,0,8.7,3.9,8.7,8.7"/>
|
||||
<polyline class="st0" points="19.3,10.1 14.9,5.6 19.3,1.2 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 791 B |
@@ -101,7 +101,7 @@ export default {
|
||||
// 最大输入长度，设置为 -1 的时候不限制最大长度
|
||||
maxlength: {
|
||||
type: [String, Number],
|
||||
default: 140
|
||||
default: 160
|
||||
},
|
||||
// 边框类型，surround-四周边框，bottom-底部边框
|
||||
border: {
|
||||
|
||||
Reference in New Issue
Block a user