diff --git a/java-mall-app-shop-admin/components/poiuy-uImgUpload/imgUpload.vue b/java-mall-app-shop-admin/components/poiuy-uImgUpload/imgUpload.vue index 2dd9cbb..293b564 100644 --- a/java-mall-app-shop-admin/components/poiuy-uImgUpload/imgUpload.vue +++ b/java-mall-app-shop-admin/components/poiuy-uImgUpload/imgUpload.vue @@ -88,6 +88,13 @@ > {{ tipObj.prompt }} + + + @@ -167,7 +174,7 @@ export default { pressImg: { //压缩图片 H5暂不支持压缩api type: Number, - default: -1, + default: 75, }, config: { type: Object, @@ -207,6 +214,11 @@ export default { headers: {}, curPlatform: "", currIndex: null, + + croppedImageUrl: "", // 裁剪后的图片地址 + canvasWidth: 0, // canvas宽度 + canvasHeight: 0, // canvas高度 + tempImagePath: "", // 临时图片路径 }; }, created() { @@ -251,6 +263,88 @@ export default { }, }, methods: { + // 处理图片:获取信息并裁剪 + processImage(tempImagePath) { + return new Promise((reolse, reject) => { + uni.getImageInfo({ + src: tempImagePath, + success: (imageInfo) => { + // 计算裁剪参数 + const { width, height } = imageInfo; + // 确定正方形的边长(取宽高中的较小值) + const sideLength = Math.min(width, height); + + // 计算裁剪的起始坐标,确保居中裁剪,完整显示商品 + const x = (width - sideLength) / 2; + const y = (height - sideLength) / 2; + + // 设置canvas尺寸为正方形边长 + this.canvasWidth = sideLength; + this.canvasHeight = sideLength; + + // 绘制到canvas进行裁剪 + const ctx = uni.createCanvasContext("cropperCanvas", this); + + // 清除画布 + ctx.clearRect(0, 0, sideLength, sideLength); + + // 绘制图片并裁剪 + ctx.drawImage( + tempImagePath, + x, + y, + sideLength, + sideLength, // 源图像裁剪区域 + 0, + 0, + sideLength, + sideLength // 目标画布绘制区域 + ); + + // 执行绘制 + ctx.draw(false, () => { + // 从canvas获取裁剪后的图片 + uni.canvasToTempFilePath( + { + canvasId: "cropperCanvas", + width: sideLength, + height: sideLength, + destWidth: sideLength, + destHeight: sideLength, + quality: 0.9, + success: (res) => { + // this.croppedImageUrl = res.tempFilePath; + reolse(res.tempFilePath); + // uni.showToast({ + // title: "图片处理完成", + // icon: "success", + // }); + }, + fail: (err) => { + reject(err); + console.error("canvas转图片失败:", err); + // uni.showToast({ + // title: "图片处理失败", + // icon: "none", + // }); + }, + }, + this + ); + }); + }, + fail: (err) => { + reject(err); + console.error("获取图片信息失败:", err); + // uni.showToast({ + // title: "获取图片信息失败", + // icon: "none", + // }); + }, + }); + }); + }, + upPhoto() { let that = this; if (!that.url) { @@ -275,8 +369,8 @@ export default { uni.chooseImage({ count: Number(that.canUpCount), sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有 - sourceType: ["camera"], //从相册选择 - success: function (res) { + sourceType: ["camera"], //拍照上传 + success: async function (res) { if (res) { if (res.tempFiles) { for (let item of res.tempFiles) { @@ -303,7 +397,13 @@ export default { } } that.currIndex = that.imgArray.length; - that.imgArray = [...that.imgArray, ...res.tempFilePaths]; + //#ifdef H5 + let tempUrl = res.tempFilePaths[0]; + //#endif + //#ifdef APP-PLUS + let tempUrl = await that.processImage(res.tempFilePaths[0]); + //#endif + that.imgArray = [...that.imgArray, tempUrl]; that.changeImgArr(false); if (that.pressImg >= 0) { //存在图片压缩 开启图片压缩 @@ -323,7 +423,7 @@ export default { count: Number(that.canUpCount), sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有 sourceType: ["album"], //从相册选择 - success: function (res) { + success: async function (res) { if (res) { if (res.tempFiles) { for (let item of res.tempFiles) { @@ -350,7 +450,14 @@ export default { } } that.currIndex = that.imgArray.length; - that.imgArray = [...that.imgArray, ...res.tempFilePaths]; + //#ifdef H5 + let tempUrl = res.tempFilePaths[0]; + //#endif + //#ifdef APP-PLUS + let tempUrl = await that.processImage(res.tempFilePaths[0]); + //#endif + + that.imgArray = [...that.imgArray, tempUrl]; that.changeImgArr(false); if (that.pressImg >= 0) { //存在图片压缩 开启图片压缩 @@ -418,7 +525,7 @@ export default { uni.compressImage({ src: item.url, quality: _this.pressImg, - success: (res) => { + success: async (res) => { ++success; item.pressUrl = res.tempFilePath; }, @@ -498,8 +605,8 @@ export default { //成功情况下 _this.imgArray[i].result = true; res.code = 0; - _this.imgArray[i].url = res.data.url; //这里 - callback(res.data.url); + _this.imgArray[i].url = res?.data?.url || ''; //这里 + callback(res?.data?.url || ''); } else { _this.imgArray[i].result = false; _this.tipObj.prompt = "上传失败,请检查!"; @@ -947,4 +1054,12 @@ export default { transform: translateX(0%); opacity: 1; } + +/* 隐藏canvas,仅用于后台处理 */ +.cropper-canvas { + position: absolute; + left: -999999px; + top: -999999px; + z-index: -1; +} diff --git a/java-mall-app-shop-admin/static/icon_app_1024.png b/java-mall-app-shop-admin/static/icon_app_1024.png new file mode 100644 index 0000000..2ea5cde Binary files /dev/null and b/java-mall-app-shop-admin/static/icon_app_1024.png differ