上传头像 剪裁4:5
This commit is contained in:
parent
237ae1e61b
commit
43e61978d7
|
|
@ -137,6 +137,7 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<jp-cropper-watermark :watermarkType="1" mode="ratio" :width="400" :height="500" :maxWidth="400" :maxHeight="500" :url="url" @cancel="oncancel" @ok="onok"></jp-cropper-watermark>
|
||||||
</view>
|
</view>
|
||||||
<view class="margin-top-sm">持有资质证书（可多张）</view>
|
<view class="margin-top-sm">持有资质证书（可多张）</view>
|
||||||
<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
|
<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
|
||||||
|
|
@ -325,6 +326,8 @@
|
||||||
XCXIsSelect: '否',
|
XCXIsSelect: '否',
|
||||||
renzhengStatus: false,
|
renzhengStatus: false,
|
||||||
typeList:[],
|
typeList:[],
|
||||||
|
url:'',
|
||||||
|
urlUol:''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
|
@ -781,32 +784,31 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
validateImageRatio(imagePath, targetRatio) {
|
onok(ev) {
|
||||||
return new Promise((resolve, reject) => {
|
var that=this;
|
||||||
uni.getImageInfo({
|
this.url = "";
|
||||||
src: imagePath,
|
that.form.headImg = ev.path;
|
||||||
success: (info) => {
|
var url = null;
|
||||||
const size = info.size;
|
if(ev.path){
|
||||||
if (size / 1024 / 1024 > 4) {
|
that.$queue.showLoading("上传中...");
|
||||||
// 图片大于2MB
|
// 图片小于等于2MB
|
||||||
uni.showToast({
|
uni.uploadFile({ // 上传接口
|
||||||
icon:'error',
|
url: websocketUtils.uploadFileUrl(), //真实的接口地址
|
||||||
title:'图片超出2MB限制,请重新选择'
|
filePath: that.urlUol,
|
||||||
})
|
name: 'file',
|
||||||
} else {
|
success: (uploadFileRes) => {
|
||||||
const { width, height } = info;
|
that.form.headImg = JSON.parse(uploadFileRes.data).data
|
||||||
const actualRatio = width / height;
|
console.log(that.form.headImg)
|
||||||
const isValid = Math.abs(actualRatio - targetRatio) < Number.EPSILON;
|
uni.hideLoading();
|
||||||
resolve(isValid);
|
|
||||||
console.log("asdasdasd")
|
|
||||||
|
|
||||||
|
}
|
||||||
}
|
});
|
||||||
|
}
|
||||||
},
|
console.log("asdasdasdasd",this.avatar)
|
||||||
fail: () => reject(false),
|
},
|
||||||
});
|
oncancel() {
|
||||||
});
|
// url设置为空，隐藏控件
|
||||||
|
this.url = "";
|
||||||
},
|
},
|
||||||
//上传头像
|
//上传头像
|
||||||
addImagea(e) {
|
addImagea(e) {
|
||||||
|
|
@ -816,36 +818,26 @@
|
||||||
sourceType: ['album', 'camera'],
|
sourceType: ['album', 'camera'],
|
||||||
success: res => {
|
success: res => {
|
||||||
for (let i = 0; i < res.tempFilePaths.length; i++) {
|
for (let i = 0; i < res.tempFilePaths.length; i++) {
|
||||||
that.$queue.showLoading("上传中...");
|
uni.getFileInfo({
|
||||||
this.validateImageRatio(res.tempFilePaths[i], 4 / 5).then((isValid) => {
|
filePath: res.tempFilePaths[i],
|
||||||
if (isValid) {
|
success: (infoRes) => {
|
||||||
// 图片小于等于2MB
|
const size = infoRes.size;
|
||||||
uni.uploadFile({ // 上传接口
|
console.log("size----------->",size / 1024 / 1024)
|
||||||
url: websocketUtils.uploadFileUrl(), //真实的接口地址
|
if (size / 1024 / 1024 > 4) {
|
||||||
filePath: res.tempFilePaths[i],
|
// 图片大于2MB
|
||||||
name: 'file',
|
uni.showToast({
|
||||||
success: (uploadFileRes) => {
|
icon:'error',
|
||||||
if (e == 1) {
|
title:'图片超出4MB限制,请重新选择'
|
||||||
that.form.front = JSON.parse(uploadFileRes.data).data
|
})
|
||||||
} else if (e == 2) {
|
} else {
|
||||||
that.form.back = JSON.parse(uploadFileRes.data).data
|
that.url=res.tempFilePaths[i];
|
||||||
} else if (e == 4) {
|
that.urlUol=res.tempFilePaths[i];
|
||||||
that.form.headImg = JSON.parse(uploadFileRes.data).data
|
}
|
||||||
console.log(that.form.headImg)
|
},
|
||||||
}
|
fail: () => {
|
||||||
uni.hideLoading();
|
cons.log("上传失败")
|
||||||
|
}
|
||||||
}
|
});
|
||||||
});
|
|
||||||
// 继续上传图片的逻辑...
|
|
||||||
} else {
|
|
||||||
uni.showToast({
|
|
||||||
title: '图片比例不符合要求，请上传4:5的图片',
|
|
||||||
icon: 'none',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
@ -857,7 +849,7 @@
|
||||||
sourceType: ['album', 'camera'],
|
sourceType: ['album', 'camera'],
|
||||||
success: res => {
|
success: res => {
|
||||||
for (let i = 0; i < res.tempFilePaths.length; i++) {
|
for (let i = 0; i < res.tempFilePaths.length; i++) {
|
||||||
that.$queue.showLoading("上传中...");
|
|
||||||
uni.getFileInfo({
|
uni.getFileInfo({
|
||||||
filePath: res.tempFilePaths[i],
|
filePath: res.tempFilePaths[i],
|
||||||
success: (infoRes) => {
|
success: (infoRes) => {
|
||||||
|
|
|
||||||
|
|
@ -15,10 +15,12 @@
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
<!-- #ifndef MP-WEIXIN -->
|
<!-- #ifndef MP-WEIXIN -->
|
||||||
<view @click="uploadImg()">
|
<view @click="uploadImg()">
|
||||||
|
<jp-cropper-watermark :watermarkType="1" mode="ratio" :width="400" :height="500" :maxWidth="400" :maxHeight="500" :url="url" @cancel="oncancel" @ok="onok"></jp-cropper-watermark>
|
||||||
<image src="../../static/logo.png" v-if="avatar==null" mode=""
|
<image src="../../static/logo.png" v-if="avatar==null" mode=""
|
||||||
style="width: 111rpx;height: 111rpx;border-radius: 50%;"></image>
|
style="width: 111rpx;height: 111rpx;border-radius: 50%;"></image>
|
||||||
<image v-else :src="avatar" mode="" style="width: 111rpx;height: 111rpx;border-radius: 50%;">
|
<image v-else :src="avatar" mode="" style="width: 111rpx;height: 111rpx;border-radius: 50%;">
|
||||||
</image>
|
</image>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -98,7 +100,8 @@
|
||||||
zhiFuBao: '',
|
zhiFuBao: '',
|
||||||
zhiFuBaoName: '',
|
zhiFuBaoName: '',
|
||||||
sex: 1,
|
sex: 1,
|
||||||
age: 0
|
age: 0,
|
||||||
|
url:''
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onLoad(e) {
|
onLoad(e) {
|
||||||
|
|
@ -183,29 +186,35 @@
|
||||||
url: '../jifen/myaddress'
|
url: '../jifen/myaddress'
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
validateImageRatio(imagePath, targetRatio) {
|
onok(ev) {
|
||||||
return new Promise((resolve, reject) => {
|
var that=this;
|
||||||
uni.getImageInfo({
|
this.url = "";
|
||||||
src: imagePath,
|
this.avatar = ev.path;
|
||||||
success: (info) => {
|
var url = null;
|
||||||
const size = info.size;
|
if(ev.path){
|
||||||
if (size / 1024 / 1024 > 4) {
|
uni.showLoading({
|
||||||
// 图片大于2MB
|
title: '上传中...'
|
||||||
uni.showToast({
|
});
|
||||||
icon:'error',
|
let token = uni.getStorageSync('token');
|
||||||
title:'图片超出2MB限制,请重新选择'
|
let userId = uni.getStorageSync('userId');
|
||||||
})
|
uni.uploadFile({
|
||||||
} else {
|
url: websocketUtils.uploadFileUrl(), //真实的接口地址
|
||||||
const { width, height } = info;
|
filePath:that.url,
|
||||||
const actualRatio = width / height;
|
header: {
|
||||||
const isValid = Math.abs(actualRatio - targetRatio) < Number.EPSILON;
|
token: token
|
||||||
resolve(isValid);
|
},
|
||||||
}
|
name: 'file',
|
||||||
|
success: uploadFileRes => {
|
||||||
},
|
url = JSON.parse(uploadFileRes.data);
|
||||||
fail: () => reject(false),
|
// that.avatar = url.data
|
||||||
});
|
uni.hideLoading();
|
||||||
});
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
oncancel() {
|
||||||
|
// url设置为空，隐藏控件
|
||||||
|
this.url = "";
|
||||||
},
|
},
|
||||||
uploadImg() {
|
uploadImg() {
|
||||||
let token = uni.getStorageSync('token')
|
let token = uni.getStorageSync('token')
|
||||||
|
|
@ -237,40 +246,31 @@
|
||||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||||
sourceType: ['album'], //从相册选择
|
sourceType: ['album'], //从相册选择
|
||||||
success: function(res) {
|
success: function(res) {
|
||||||
uni.showLoading({
|
uni.getImageInfo({
|
||||||
title: '上传中...'
|
src: res.tempFilePaths[0],
|
||||||
});
|
success: (info) => {
|
||||||
let token = uni.getStorageSync('token');
|
const size = info.size;
|
||||||
let userId = uni.getStorageSync('userId');
|
if (size / 1024 / 1024 > 4) {
|
||||||
that.validateImageRatio(res.tempFilePaths[0],4 / 5).then((isValid) => {
|
// 图片大于2MB
|
||||||
if (isValid) {
|
uni.showToast({
|
||||||
// 图片小于等于2MB
|
icon:'error',
|
||||||
uni.uploadFile({
|
title:'图片超出4MB限制,请重新选择'
|
||||||
url: websocketUtils.uploadFileUrl(), //真实的接口地址
|
})
|
||||||
filePath: res.tempFilePaths[0],
|
} else {
|
||||||
header: {
|
that.url = res.tempFilePaths[0];
|
||||||
token: token
|
}
|
||||||
},
|
|
||||||
name: 'file',
|
}
|
||||||
success: uploadFileRes => {
|
|
||||||
url = JSON.parse(uploadFileRes.data);
|
|
||||||
that.avatar = url.data
|
|
||||||
uni.hideLoading();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// 继续上传图片的逻辑...
|
|
||||||
} else {
|
|
||||||
uni.showToast({
|
|
||||||
title: '图片比例不符合要求，请上传4:5的图片',
|
|
||||||
icon: 'none',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}, fail: function (err) {
|
||||||
|
console.log('showActionSheet失败', err);
|
||||||
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
## 1.0.1（2023-08-31）
|
||||||
|
修复部分问题
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,83 @@
|
||||||
|
{
|
||||||
|
"id": "jp-cropper-watermark",
|
||||||
|
"displayName": "高性能图片裁剪，裁剪图片后自动添加水印",
|
||||||
|
"version": "1.0.1",
|
||||||
|
"description": "高性能图片裁剪并添加水印工具，水印样式持续更新中，裁剪图片后自动添加水印",
|
||||||
|
"keywords": [
|
||||||
|
"头像",
|
||||||
|
"图片",
|
||||||
|
"裁剪",
|
||||||
|
"裁剪并添加水印",
|
||||||
|
"剪切图片"
|
||||||
|
],
|
||||||
|
"repository": "",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.1.0"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "插件不采集任何数据",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "",
|
||||||
|
"type": "component-vue"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
},
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "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"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": {
|
||||||
|
"minVersion": "2.9.0"
|
||||||
|
},
|
||||||
|
"阿里": "n",
|
||||||
|
"百度": "n",
|
||||||
|
"字节跳动": "n",
|
||||||
|
"QQ": "u"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<button @click="select">选择图片</button>
|
||||||
|
<image mode="widthFix" :src="path"/>
|
||||||
|
<jp-cropper-watermark watermark="水印来了" :watermarkType="1" mode="free" :width="200" :height="140" :maxWidth="1024" :maxHeight="1024" :url="url" @cancel="oncancel" @ok="onok"></jp-cropper-watermark>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
url: "",
|
||||||
|
path: ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
select() {
|
||||||
|
uni.chooseImage({
|
||||||
|
count: 1,
|
||||||
|
success: (rst) => {
|
||||||
|
// 设置url的值，显示控件
|
||||||
|
this.url = rst.tempFilePaths[0];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onok(ev) {
|
||||||
|
this.url = "";
|
||||||
|
this.path = ev.path;
|
||||||
|
},
|
||||||
|
oncancel() {
|
||||||
|
// url设置为空，隐藏控件
|
||||||
|
this.url = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
# jp-cropper-watermark
|
||||||
|
|
||||||
|
## 高性能图片裁剪并添加水印工具
|
||||||
|
# 有项目需要开发的请联系 QQ:371524845
|
||||||
|
## 开发不易，如果帮助到你的，请支持 有问题请留言，作者会积极更新
|
||||||
|
|
||||||
|
### 属性说明
|
||||||
|
|属性 |类型 |默认 |备注 |
|
||||||
|
| :--------: | :-----: | :----: | :----: |
|
||||||
|
| url |String | "" | 需要裁剪的图片路径，为空时控件隐藏，不为空时控件显示|
|
||||||
|
| mode |String | "free" | 裁剪模式|
|
||||||
|
| width |Number | 200 | 图片裁剪后的宽度，固定大小时有效|
|
||||||
|
| height |Number | 200 | 图片裁剪后的高度，固定大小时有效|
|
||||||
|
| maxWidth |Number | 1024 | 图片裁剪后的最大宽度 |
|
||||||
|
| maxHeight |Number | 1024 | 图片裁剪后的最大高度 |
|
||||||
|
| watermark |String | '' | 水印文字，不传就不生成水印 |
|
||||||
|
| watermarkType |Number | 1 | 水印样式（目前有两种样式）--持续更新中 |
|
||||||
|
|
||||||
|
### mode有效值
|
||||||
|
|
||||||
|
| 模式 |值 |说明 |
|
||||||
|
| :-----: | :-----: | :----: |
|
||||||
|
| 固定模式 |fixed | 裁剪出指定大小的图片，一般用于头像上传 |
|
||||||
|
| 等比缩放 |ratio | 限定宽高比，裁剪大小不固定 |
|
||||||
|
| 自由模式 |free | 不限定宽高比，裁剪大小不固定 |
|
||||||
|
|
||||||
|
### 事件说明
|
||||||
|
|事件名称 |说明 |返回 |
|
||||||
|
| :--------: | :-----: | :----: |
|
||||||
|
| ok |点击确定按钮 | e:{path} |
|
||||||
|
| cancel |点击取消按钮 | - |
|
||||||
|
|
||||||
|
|
||||||
|
### 示例
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<button @click="select">选择图片</button>
|
||||||
|
<image mode="widthFix" :src="path"/>
|
||||||
|
<jp-cropper-watermark watermark="水印来了" :watermarkType="1" mode="free" :width="200" :height="140" :maxWidth="1024" :maxHeight="1024" :url="url" @cancel="oncancel" @ok="onok"></jp-cropper-watermark>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
url: "",
|
||||||
|
path: ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
select() {
|
||||||
|
uni.chooseImage({
|
||||||
|
count: 1,
|
||||||
|
success: (rst) => {
|
||||||
|
// 设置url的值，显示控件
|
||||||
|
this.url = rst.tempFilePaths[0];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onok(ev) {
|
||||||
|
this.url = "";
|
||||||
|
this.path = ev.path;
|
||||||
|
},
|
||||||
|
oncancel() {
|
||||||
|
// url设置为空，隐藏控件
|
||||||
|
this.url = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 注意
|
||||||
|
1.微信小程序从基础库 2.21.0 开始， wx.chooseImage 停止维护，请使用 uni.chooseMedia 代替。<br/>
|
||||||
|
2.微信小程序真机调试会报错，但正常运行是不会有问题的。<br/>
|
||||||
|
3.uni-app版本不断更新，插件有时无法适应新版本，感谢大家及时提交bug，但希望大家手下留情，不要轻易给差评。
|
||||||
Loading…
Reference in New Issue