上传图片大于2M压缩

pages/riderMy/myAccount/Txmoney/Txmoney.vue

@@ -86,12 +86,27 @@
 					style="border-radius: 10rpx;background-color: #7E59FF;color: #fff;height: 80rpx;line-height: 80rpx;">保存</view> -->
 			</view>
 		</u-popup>
+
+		<!-- 用于图片压缩的canvas画布 -->
+		<canvas
+			:style="{
+				width: cw + 'px',
+				height: cw + 'px',
+				position: 'absolute',
+				zIndex: -1,
+				left: '-10000rpx',
+				top: '-10000rpx'
+			}"
+			canvas-id="zipCanvas"
+		></canvas>
+		<!--画布结束-->
 	</view>
 </template>
 
 <script>
 import { showToast } from '../../../../common/queue'
 import configdata from '../../../../common/config.js'
+import getLessLimitSizeImage from '@/utils/imageCompress.js'
 export default {
 	data() {
 		return {
@@ -113,7 +128,9 @@ export default {
 			// 开户行
 			yingName: '',
 			// 开户人姓名
-			yingPeople: ''
+			yingPeople: '',
+			//画板边长默认是屏幕宽度，正方形画布
+			cw: uni.getSystemInfoSync().windowWidth
 		}
 	},
 	onLoad() {
@@ -479,35 +496,50 @@ export default {
 		weixin() {
 			let that = this
 			uni.chooseImage({
-				count: 1, //默认9
-				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
-				sourceType: ['album', 'camera'], //从相册选择
+				count: 1,
+				sourceType: ['album', 'camera'],
 				success: (res) => {
-					that.$queue.showLoading('上传中...')
 					for (let i = 0; i < 1; i++) {
-						uni.uploadFile({
-							// 上传接口
-							url: that.config('APIHOST1') + '/alioss/upload', //真实的接口地址
-							filePath: res.tempFilePaths[i],
-							name: 'file',
-							success: (uploadFileRes) => {
-								let img = JSON.parse(uploadFileRes.data).data
-								let userId = that.$queue.getData('userId')
-								let data = {
-									cashQrCode: img
-								}
-								that.$Request.postJson('/app/user/updateUser', data).then((res) => {
-									if (res.code == 0) {
-										that.getMoney()
-										setTimeout(function () {
-											that.$queue.showToast('上传成功')
-										}, 1000)
+						//这里的id和页面中写的html代码的canvas的id要一致
+						let canvasId = 'zipCanvas'
+						//原图的路径
+						let imagePath = res.tempFiles[i].path
+						//大小限制
+						let limitSize = 1024 * 2
+						//初始绘画区域是画布自身的宽度也就是屏幕宽度
+						let drawWidth = uni.getSystemInfoSync().windowWidth
+						let that = this
+						getLessLimitSizeImage(canvasId, imagePath, limitSize, drawWidth, that, (resPath) => {
+							uni.showLoading({
+								title: '上传中'
+							})
+							uni.uploadFile({
+								url: that.config('APIHOST1') + '/alioss/upload',
+								filePath: resPath,
+								name: 'file',
+								success: (uploadFileRes) => {
+									let img = JSON.parse(uploadFileRes.data).data
+									let userId = that.$queue.getData('userId')
+									let data = {
+										cashQrCode: img
 									}
-								})
-								uni.hideLoading()
-
-								// that.show = false
-							}
+									that.$Request.postJson('/app/user/updateUser', data).then((res) => {
+										if (res.code == 0) {
+											that.getMoney()
+											setTimeout(function () {
+												that.$queue.showToast('上传成功')
+											}, 1000)
+										}
+									})
+									uni.hideLoading()
+								},
+								fail: () => {
+									uni.showToast({
+										title: '上传失败',
+										icon: 'error'
+									})
+								}
+							})
 						})
 					}
 				}

pages/riderMy/set/yijian.vue

@@ -1,194 +1,167 @@
-<template>
-	<view class="page" style="background-color: #ffffff;">
-		<view class="feedback-title">
-			<text>问题和意见</text>
-			<text @tap="chooseMsg">快速键入</text>
-		</view>
-		<view class="feedback-body"><textarea placeholder="请详细描述你的问题和意见..." v-model="sendDate.content"
-				class="feedback-textare" /></view>
-		<view v-if="XCXIsSelect !='否'">
-			<view class="feedback-title"><text>联系方式</text></view>
-			<view class="feedback-body"><input class="feedback-input" v-model="sendDate.contact"
-					placeholder="方便我们联系你 " /></view>
-
-		</view>
-		<button style="" class="feedback-submit" @tap="send">提交</button>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				msgContents: ['界面显示错乱', '启动缓慢，卡出翔了', 'UI无法直视，丑哭了', '偶发性崩溃'],
-				stars: [1, 2, 3, 4, 5],
-				imageList: [],
-				sendDate: {
-					score: 5,
-					content: '',
-					contact: ''
-				},
-				XCXIsSelect: '否',
-			};
-		},
-		onLoad() {
-			this.XCXIsSelect = this.$queue.getData('XCXIsSelect');
-			// let deviceInfo = {
-			// 	appid: plus.runtime.appid,
-			// 	imei: plus.device.imei, //设备标识
-			// 	p: plus.os.name === 'Android' ? 'a' : 'i', //平台类型，i表示iOS平台，a表示Android平台。
-			// 	md: plus.device.model, //设备型号
-			// 	app_version: plus.runtime.version,
-			// 	plus_version: plus.runtime.innerVersion, //基座版本号
-			// 	os: plus.os.version,
-			// 	net: '' + plus.networkinfo.getCurrentType()
-			// };
-			// this.sendDate = Object.assign(deviceInfo, this.sendDate);
-		},
-		methods: {
-			close(e) {
-				this.imageList.splice(e, 1);
-			},
-			chooseMsg() {
-				//快速输入
-				uni.showActionSheet({
-					itemList: this.msgContents,
-					success: res => {
-						this.sendDate.content = this.msgContents[res.tapIndex];
-					}
-				});
-			},
-			chooseImg() {
-				//选择图片
-				uni.chooseImage({
-					sourceType: ['camera', 'album'],
-					sizeType: 'compressed',
-					count: 8 - this.imageList.length,
-					success: res => {
-						this.imageList = this.imageList.concat(res.tempFilePaths);
-					}
-				});
-			},
-			chooseStar(e) {
-				//点击评星
-				this.sendDate.score = e;
-			},
-			previewImage() {
-				//预览图片
-				uni.previewImage({
-					urls: this.imageList
-				});
-			},
-			send() {
-				//发送反馈
-				console.log(JSON.stringify(this.sendDate));
-
-				if (!this.sendDate.content) {
-					uni.showToast({
-						icon: 'none',
-						title: '请输入反馈内容'
-					});
-					return;
-				}
-				if (!this.sendDate.contact) {
-					uni.showToast({
-						icon: 'none',
-						title: '请填写联系方式'
-					});
-					return;
-				}
-				this.$queue.showLoading('加载中...');
-				this.$Request.postJson('/app/shop/userFeedback', {
-					shopId: uni.getStorageSync("shopId"),
-					userEmail: this.sendDate.contact,
-					feedbackMessage: this.sendDate.content,
-					// state: 2
-				}).then(res => {
-					if (res.code === 0) {
-						uni.showToast({
-							title: '投诉成功'
-						});
-						setTimeout(function() {
-							uni.navigateBack();
-						}, 1000);
-					} else {
-						uni.hideLoading();
-						uni.showModal({
-							showCancel: false,
-							title: '投诉失败',
-							content: res.msg
-						});
-					}
-				});
-			}
-		}
-	};
-</script>
-
-<style>
-	@font-face {
-		font-family: uniicons;
-		font-weight: normal;
-		font-style: normal;
-		src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
-	}
-
-	page {
-		background-color: #F5F5F5 !important;
-	}
-
-	view {
-		font-size: 28upx;
-	}
-
-
-	/*问题反馈*/
-	.feedback-title {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: center;
-		padding: 20upx;
-		color: #8f8f94;
-		font-size: 28upx;
-	}
-
-	.feedback-star-view.feedback-title {
-		justify-content: flex-start;
-		margin: 0;
-	}
-
-	.feedback-body {
-		font-size: 32upx;
-		padding: 16upx;
-		margin: 16upx;
-		border-radius: 16upx;
-		background: #FFFFFF;
-		/* color: #FFF; */
-	}
-
-	.feedback-textare {
-		height: 200upx;
-		font-size: 34upx;
-		line-height: 50upx;
-		width: 100%;
-		box-sizing: border-box;
-		padding: 20upx 30upx 0;
-
-	}
-
-	.feedback-input {
-		font-size: 32upx;
-		height: 60upx;
-		/* padding: 15upx 20upx; */
-		line-height: 60upx;
-	}
-
-
-	.feedback-submit {
-		background: #FFCC00;
-		/* color: #ffffff; */
-		margin: 20upx;
-		margin-top: 32upx;
-	}
-</style>
+<template>
+	<view class="page" style="background-color: #ffffff">
+		<view class="feedback-title">
+			<text>问题和意见</text>
+			<text @tap="chooseMsg">快速键入</text>
+		</view>
+		<view class="feedback-body"><textarea placeholder="请详细描述你的问题和意见..." v-model="sendDate.content" class="feedback-textare" /></view>
+		<view v-if="XCXIsSelect != '否'">
+			<view class="feedback-title"><text>联系方式</text></view>
+			<view class="feedback-body"><input class="feedback-input" v-model="sendDate.contact" placeholder="方便我们联系你 " /></view>
+		</view>
+		<button style="" class="feedback-submit" @tap="send">提交</button>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			msgContents: ['界面显示错乱', '启动缓慢，卡出翔了', 'UI无法直视，丑哭了', '偶发性崩溃'],
+			stars: [1, 2, 3, 4, 5],
+			imageList: [],
+			sendDate: {
+				score: 5,
+				content: '',
+				contact: ''
+			},
+			XCXIsSelect: '否'
+		}
+	},
+	onLoad() {
+		this.XCXIsSelect = this.$queue.getData('XCXIsSelect')
+		// let deviceInfo = {
+		// 	appid: plus.runtime.appid,
+		// 	imei: plus.device.imei, //设备标识
+		// 	p: plus.os.name === 'Android' ? 'a' : 'i', //平台类型，i表示iOS平台，a表示Android平台。
+		// 	md: plus.device.model, //设备型号
+		// 	app_version: plus.runtime.version,
+		// 	plus_version: plus.runtime.innerVersion, //基座版本号
+		// 	os: plus.os.version,
+		// 	net: '' + plus.networkinfo.getCurrentType()
+		// };
+		// this.sendDate = Object.assign(deviceInfo, this.sendDate);
+	},
+	methods: {
+		chooseMsg() {
+			//快速输入
+			uni.showActionSheet({
+				itemList: this.msgContents,
+				success: (res) => {
+					this.sendDate.content = this.msgContents[res.tapIndex]
+				}
+			})
+		},
+
+		send() {
+			//发送反馈
+			console.log(JSON.stringify(this.sendDate))
+
+			if (!this.sendDate.content) {
+				uni.showToast({
+					icon: 'none',
+					title: '请输入反馈内容'
+				})
+				return
+			}
+			if (!this.sendDate.contact) {
+				uni.showToast({
+					icon: 'none',
+					title: '请填写联系方式'
+				})
+				return
+			}
+			this.$queue.showLoading('加载中...')
+			this.$Request
+				.postJson('/app/shop/userFeedback', {
+					shopId: uni.getStorageSync('shopId'),
+					userEmail: this.sendDate.contact,
+					feedbackMessage: this.sendDate.content
+					// state: 2
+				})
+				.then((res) => {
+					if (res.code === 0) {
+						uni.showToast({
+							title: '投诉成功'
+						})
+						setTimeout(function () {
+							uni.navigateBack()
+						}, 1000)
+					} else {
+						uni.hideLoading()
+						uni.showModal({
+							showCancel: false,
+							title: '投诉失败',
+							content: res.msg
+						})
+					}
+				})
+		}
+	}
+}
+</script>
+
+<style>
+@font-face {
+	font-family: uniicons;
+	font-weight: normal;
+	font-style: normal;
+	src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
+}
+
+page {
+	background-color: #f5f5f5 !important;
+}
+
+view {
+	font-size: 28upx;
+}
+
+/*问题反馈*/
+.feedback-title {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	padding: 20upx;
+	color: #8f8f94;
+	font-size: 28upx;
+}
+
+.feedback-star-view.feedback-title {
+	justify-content: flex-start;
+	margin: 0;
+}
+
+.feedback-body {
+	font-size: 32upx;
+	padding: 16upx;
+	margin: 16upx;
+	border-radius: 16upx;
+	background: #ffffff;
+	/* color: #FFF; */
+}
+
+.feedback-textare {
+	height: 200upx;
+	font-size: 34upx;
+	line-height: 50upx;
+	width: 100%;
+	box-sizing: border-box;
+	padding: 20upx 30upx 0;
+}
+
+.feedback-input {
+	font-size: 32upx;
+	height: 60upx;
+	/* padding: 15upx 20upx; */
+	line-height: 60upx;
+}
+
+.feedback-submit {
+	background: #ffcc00;
+	/* color: #ffffff; */
+	margin: 20upx;
+	margin-top: 32upx;
+}
+</style>

utils/imageCompress.js

@@ -0,0 +1,109 @@
+//通过canvas将图片压缩至指定大小
+
+//判断图片大小是否满足需求,limitSize的单位是kb
+function imageSizeIsLessLimitSize(imagePath, limitSize, lessCallback, moreCallback) {
+	//获取文件信息
+	wx.getFileSystemManager().getFileInfo({
+		filePath: imagePath,
+		success: (res) => {
+			// console.log("压缩前图片大小", res.size / 1024, 'kb');
+			//如果图片太大了走moreCallback
+			if (res.size > 1024 * limitSize) {
+				moreCallback()
+			}
+			//图片满足要求了走lessCallback
+			else {
+				lessCallback()
+			}
+		}
+	})
+}
+
+//将图片画在画布上并获取画好之后的图片的路径
+function getCanvasImage(canvasId, imagePath, imageW, imageH, that, getImgSuccess) {
+	//创建画布内容
+	const ctx = wx.createCanvasContext(canvasId, that);
+	//图片画上去，imageW和imageH是画上去的尺寸，图像和画布间隔都是0
+	ctx.drawImage(imagePath, 0, 0, imageW, imageH);
+	//这里一定要加定时器，给足够的时间去画（所以每次递归最少要耗时200ms，多次递归很耗时！）
+	ctx.draw(setTimeout(() => {
+		//把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
+		wx.canvasToTempFilePath({
+			canvasId: canvasId,
+			x: 0,
+			y: 0,
+			width: imageW,
+			height: imageH,
+			quality: 1, //最高质量
+			success: (res) => {
+				// console.log(res.tempFilePath);
+				//将取出的图片路径通过回调函数返回
+				getImgSuccess(res.tempFilePath);
+			},
+			fail: (err) => {
+				console.log(err);
+			}
+		}, that)
+	}, 500));
+}
+
+//主函数，默认限制大小1024kb即1mb,drawWidth是绘画区域的大小
+//初始值传入为画布自身的边长（我们这是一个正方形的画布）
+function getLessLimitSizeImage(canvasId, imagePath, limitSize = 1024, drawWidth, that, callback) {
+	//判断图片尺寸是否满足要求
+	imageSizeIsLessLimitSize(imagePath, limitSize,
+		(lessRes) => {
+			//满足要求走callback，将压缩后的文件路径返回
+			callback(imagePath);
+		},
+		(moreRes) => {
+			//不满足要求需要压缩的时候
+			wx.getImageInfo({
+				src: imagePath,
+				success: (imageInfo) => {
+					let maxSide = Math.max(imageInfo.width, imageInfo.height);
+					let windowW = drawWidth;
+					let scale = 1;
+					/*
+					这里的目的是当绘画区域缩小的比图片自身尺寸还要小的时候
+					取图片长宽的最大值，然后和当前绘画区域计算出需要放缩的比例
+					然后再画经过放缩后的尺寸，保证画出的一定是一个完整的图片。由于每次递归绘画区域都会缩小，
+					所以不用担心scale永远都是1绘画尺寸永远不变的情况，只要不满足压缩后体积的要求
+					就会缩小绘画区域，早晚会有绘画区域小于图片尺寸的情况发生
+					*/
+					if (maxSide > windowW) {
+						scale = windowW / maxSide;
+					}
+					// 判断图片是否翻转了
+					if (imageInfo.orientation.indexOf('right') !== -1 || imageInfo.orientation.indexOf(
+							'left') !== -1) {
+						//trunc是去掉小数
+						var imgW = Math.trunc(imageInfo.height * scale);
+						var imgH = Math.trunc(imageInfo.width * scale);
+					} else {
+						var imgW = Math.trunc(imageInfo.width * scale);
+						var imgH = Math.trunc(imageInfo.height * scale);
+					}
+					// console.log('调用压缩', imgW, imgH);
+
+					//图片在规定绘画区域上画并获取新的图片的path
+					getCanvasImage(canvasId, imagePath, imgW, imgH, that,
+						(pressImgPath) => {
+							/*
+							再去检查是否满足要求，始终缩小绘画区域，让图片适配绘画区域
+							这里乘以0.95是必须的，如果不缩小绘画区域，会出现尺寸比绘画区域小，
+							而体积比要求压缩体积大的情况出现，就会无穷递归下去，因为scale的值永远是1
+							但0.95不是固定的，你可以根据需要自己改，0到1之间，越小则绘画区域缩小的越快
+							但不建议取得太小，绘画区域缩小的太快，压出来的将总是很糊的
+							*/
+							getLessLimitSizeImage(canvasId, pressImgPath, limitSize, drawWidth *
+								0.95, that, callback);
+						}
+					)
+				}
+			})
+		}
+	)
+}
+
+export default getLessLimitSizeImage