上传头像剪裁4:5

2024-08-19 14:03:40 +08:00 · 2024-08-19 14:03:40 +08:00 · 43e61978d7
parent 237ae1e61b
commit 43e61978d7
7 changed files with 1411 additions and 109 deletions
--- a/my/renzheng/index.vue
+++ b/my/renzheng/index.vue
@ -137,6 +137,7 @@
 						</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 class="margin-top-sm">持有资质证书（可多张）</view>
 			<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
@ -325,6 +326,8 @@
 				XCXIsSelect: '否',
 				renzhengStatus: false,
 				typeList:[],
+				url:'',
+				urlUol:''
 			}
 		},
 		onLoad() {
@ -781,32 +784,31 @@
 					}
 				})
 			},
-			validateImageRatio(imagePath, targetRatio) {
-			  return new Promise((resolve, reject) => {
-				uni.getImageInfo({
-				  src: imagePath,
-				  success: (info) => {
-					  const size = info.size;
-					  if (size / 1024 / 1024 > 4) {
-					    // 图片大于2MB
-						uni.showToast({
-							icon:'error',
-							title:'图片超出2MB限制,请重新选择'
-						})
-					  } else {
-						  const { width, height } = info;
-						  const actualRatio = width / height;
-						  const isValid = Math.abs(actualRatio - targetRatio) < Number.EPSILON;
-						  resolve(isValid);
-						  console.log("asdasdasd")
-					
+			onok(ev) {
+				var that=this;
+				this.url = "";
+				that.form.headImg = ev.path;
+				var url = null;
+				if(ev.path){
+					that.$queue.showLoading("上传中...");
+					// 图片小于等于2MB
+					uni.uploadFile({ // 上传接口
+						url: websocketUtils.uploadFileUrl(), //真实的接口地址
+						filePath: that.urlUol,
+						name: 'file',
+						success: (uploadFileRes) => {
+							that.form.headImg = JSON.parse(uploadFileRes.data).data
+							console.log(that.form.headImg)
+							uni.hideLoading();
 					
 						}
-					
+					});
+				}
+				console.log("asdasdasdasd",this.avatar)
 			},
-				  fail: () => reject(false),
-				});
-			  });
+			oncancel() {
+				// url设置为空，隐藏控件
+				this.url = "";
 			},
 			//上传头像
 			addImagea(e) {
@ -816,36 +818,26 @@
 					sourceType: ['album', 'camera'],
 					success: res => {
 						for (let i = 0; i < res.tempFilePaths.length; i++) {
-							that.$queue.showLoading("上传中...");
-							  this.validateImageRatio(res.tempFilePaths[i], 4 / 5).then((isValid) => {
-								if (isValid) {
-									// 图片小于等于2MB
-									uni.uploadFile({ // 上传接口
-										url: websocketUtils.uploadFileUrl(), //真实的接口地址
+							uni.getFileInfo({
 							  filePath: res.tempFilePaths[i],
-										name: 'file',
-										success: (uploadFileRes) => {
-											if (e == 1) {
-												that.form.front = JSON.parse(uploadFileRes.data).data
-											} else if (e == 2) {
-												that.form.back = JSON.parse(uploadFileRes.data).data
-											} else if (e == 4) {
-												that.form.headImg = JSON.parse(uploadFileRes.data).data
-												console.log(that.form.headImg)
-											}
-											uni.hideLoading();
-									
-										}
-									});
-								  // 继续上传图片的逻辑...
-								} else {
+							  success: (infoRes) => {
+							    const size = infoRes.size;
+								console.log("size----------->",size / 1024 / 1024)
+							    if (size / 1024 / 1024 > 4) {
+							      // 图片大于2MB
 									uni.showToast({
-									title: '图片比例不符合要求，请上传4:5的图片',
-									icon: 'none',
-								  });
+										icon:'error',
+										title:'图片超出4MB限制,请重新选择'
+									})
+							    } else {
+									that.url=res.tempFilePaths[i];
+									that.urlUol=res.tempFilePaths[i];
+							    }
+							  },
+							  fail: () => {
+							   cons.log("上传失败")
 							  }
 							});
-							
 						}
 					}
 				})
@ -857,7 +849,7 @@
 					sourceType: ['album', 'camera'],
 					success: res => {
 						for (let i = 0; i < res.tempFilePaths.length; i++) {
-							that.$queue.showLoading("上传中...");
+							
 							uni.getFileInfo({
 							  filePath: res.tempFilePaths[i],
 							  success: (infoRes) => {
--- a/pages/my/userinfo.vue
+++ b/pages/my/userinfo.vue
@ -15,10 +15,12 @@
 				<!-- #endif -->
 				<!-- #ifndef MP-WEIXIN -->
 				<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=""
 						style="width: 111rpx;height: 111rpx;border-radius: 50%;"></image>
 					<image v-else :src="avatar" mode="" style="width: 111rpx;height: 111rpx;border-radius: 50%;">
 					</image>
+					
 				</view>
 				<!-- #endif -->
 			</view>
@ -98,7 +100,8 @@
 				zhiFuBao: '',
 				zhiFuBaoName: '',
 				sex: 1,
-				age: 0
+				age: 0,
+				url:''
 			};
 		},
 		onLoad(e) {
@ -183,29 +186,35 @@
 					url: '../jifen/myaddress'
 				});
 			},
-			validateImageRatio(imagePath, targetRatio) {
-			  return new Promise((resolve, reject) => {
-				uni.getImageInfo({
-				  src: imagePath,
-				  success: (info) => {
-					  const size = info.size;
-					  if (size / 1024 / 1024 > 4) {
-					    // 图片大于2MB
-						uni.showToast({
-							icon:'error',
-							title:'图片超出2MB限制,请重新选择'
-						})
-					  } else {
-						  const { width, height } = info;
-						  const actualRatio = width / height;
-						  const isValid = Math.abs(actualRatio - targetRatio) < Number.EPSILON;
-						  resolve(isValid);
-					  }
-					
+			onok(ev) {
+				var that=this;
+				this.url = "";
+				this.avatar = ev.path;
+				var url = null;
+				if(ev.path){
+					uni.showLoading({
+						title: '上传中...'
+					});
+					let token = uni.getStorageSync('token');
+					let userId = uni.getStorageSync('userId');
+					uni.uploadFile({
+						url: websocketUtils.uploadFileUrl(), //真实的接口地址
+						filePath:that.url,
+						header: {
+							token: token
 						},
-				  fail: () => reject(false),
-				});
+						name: 'file',
+						success: uploadFileRes => {
+							url = JSON.parse(uploadFileRes.data);
+							// that.avatar = url.data
+							uni.hideLoading();
+						}
 					});
+				}
+			},
+			oncancel() {
+				// url设置为空，隐藏控件
+				this.url = "";
 			},
 			uploadImg() {
 				let token = uni.getStorageSync('token')
@ -237,39 +246,30 @@
 								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
 								sourceType: ['album'], //从相册选择
 								success: function(res) {
-									uni.showLoading({
-										title: '上传中...'
-									});
-									let token = uni.getStorageSync('token');
-									let userId = uni.getStorageSync('userId');
-									that.validateImageRatio(res.tempFilePaths[0],4 / 5).then((isValid) => {
-										if (isValid) {
-											// 图片小于等于2MB
-											uni.uploadFile({
-												url: websocketUtils.uploadFileUrl(), //真实的接口地址
-												filePath: res.tempFilePaths[0],
-												header: {
-													token: token
-												},
-												name: 'file',
-												success: uploadFileRes => {
-													url = JSON.parse(uploadFileRes.data);
-													that.avatar = url.data
-													uni.hideLoading();
-												}
-											});
-										  // 继续上传图片的逻辑...
-										} else {
+									uni.getImageInfo({
+									  src: res.tempFilePaths[0],
+									  success: (info) => {
+										  const size = info.size;
+										  if (size / 1024 / 1024 > 4) {
+										    // 图片大于2MB
 											uni.showToast({
-											title: '图片比例不符合要求，请上传4:5的图片',
-											icon: 'none',
-										  });
+												icon:'error',
+												title:'图片超出4MB限制,请重新选择'
+											})
+										  } else {
+											that.url = res.tempFilePaths[0];
+										  }
+										
 									  }
 									});
 									
+									
+									
 								}
 							});
 						}
+					}, fail: function (err) {
+							console.log('showActionSheet失败', err);
 						}
 				})
 			},
--- a/uni_modules/jp-cropper-watermark/changelog.md
+++ b/uni_modules/jp-cropper-watermark/changelog.md
@ -0,0 +1,2 @@
+## 1.0.1（2023-08-31）
+修复部分问题
--- a/uni_modules/jp-cropper-watermark/components/jp-cropper-watermark/jp-cropper-watermark.vue
+++ b/uni_modules/jp-cropper-watermark/components/jp-cropper-watermark/jp-cropper-watermark.vue
--- a/uni_modules/jp-cropper-watermark/package.json
+++ b/uni_modules/jp-cropper-watermark/package.json
@ -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"
+        }
+      }
+    }
+  }
+}
--- a/uni_modules/jp-cropper-watermark/pages/index/index.vue
+++ b/uni_modules/jp-cropper-watermark/pages/index/index.vue
@ -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>
--- a/uni_modules/jp-cropper-watermark/readme.md
+++ b/uni_modules/jp-cropper-watermark/readme.md
@ -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，但希望大家手下留情，不要轻易给差评。