封装测试

common/util.js

@@ -1,26 +1,63 @@
-const formatTime = date => {
+module.exports = {
+	formatTime(date) {
 		const year = date.getFullYear()
 		const month = date.getMonth() + 1
 		const day = date.getDate()
 		const hour = date.getHours()
 		const minute = date.getMinutes()
 		const second = date.getSeconds()
-  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
-}
-const formatDate = date => {
+		return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(
+			':')
+	},
+	formatDate(date) {
 		const year = date.getFullYear()
 		const month = date.getMonth() + 1
 		const day = date.getDate()
 
 
 		return [year, month, day].map(formatNumber).join('-')
-}
-const formatNumber = n => {
+	},
+	formatNumber(n) {
 		n = n.toString()
 		return n[1] ? n : '0' + n
-}
+	},
 
-module.exports = {
-  formatTime: formatTime,
-  formatDate: formatDate
+	compress(base64String, w, quality) {
+		console.log(base64String.length);
+		var getMimeType = (urlData) => {
+			var arr = urlData.split(",");
+			var mime = arr[0].match(/:(.*?);/)[1];
+			// return mime.replace("image/", "");
+			return mime;
+		};
+		var newImage = new Image();
+		var imgWidth, imgHeight;
+
+		var promise = new Promise((resolve) => (newImage.onload = resolve));
+		newImage.src = base64String;
+		return promise.then(() => {
+			imgWidth = newImage.width;
+			imgHeight = newImage.height;
+			var canvas = document.createElement("canvas");
+			var ctx = canvas.getContext("2d");
+			if (Math.max(imgWidth, imgHeight) > w) {
+				if (imgWidth > imgHeight) {
+					canvas.width = w;
+					canvas.height = (w * imgHeight) / imgWidth;
+				} else {
+					canvas.height = w;
+					canvas.width = (w * imgWidth) / imgHeight;
+				}
+			} else {
+				canvas.width = imgWidth;
+				canvas.height = imgHeight;
+			}
+			ctx.clearRect(0, 0, canvas.width, canvas.height);
+			ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
+			var base64 = canvas.toDataURL(getMimeType(base64String), quality);
+			console.log(base64);
+			return base64;
+		});
+
+	}
 }

package.json

@@ -17,6 +17,10 @@
     ]
   },
   "dependencies": {
+    "imagemin": "^8.0.1",
+    "imagemin-mozjpeg": "^10.0.0",
+    "imagemin-pngquant": "^9.0.2",
+    "imagemin-svgo": "^10.0.1",
     "uuid": "^9.0.0",
     "vant": "^2.12.54"
   }

pages/shipWork/sign.vue

@@ -17,6 +17,7 @@
 
 </template>
 <script>
+	import utils from '@/common/util.js';
 	var x = 20;
 	var y = 20;
 	var tempPoint = []; //用来存放当前画纸上的轨迹点
@@ -139,8 +140,10 @@
 					canvasId: 'mycanvas',
 					success: function(res) {
 						let tempPath = res.tempFilePath;
-						console.log(tempPath)
-
+						console.log(tempPath,'压缩前')
+						// 示例用法
+						let compressBase64Img = utils.compress(tempPath, 500, 0.3); //conpress封装的压缩方法
+						console.log(compressBase64Img,'压缩后');
 						const ctx = uni.createCanvasContext('camCacnvs', that);
 						ctx.translate(0, that.width);
 						ctx.rotate((-90 * Math.PI) / 180);
@@ -165,8 +168,7 @@
 						}, 200);
 					}
 				});
-			}
-
+			},
 		}
 	};
 </script>