From 9926c4b5cbdff0b5dafd1ad01d86f184dc5b7022 Mon Sep 17 00:00:00 2001
From: mixtan <424491071@qq.com>
Date: Fri, 5 Sep 2025 16:02:12 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E8=87=AA=E5=8A=A8=E8=A3=81=E5=88=87?=
=?UTF-8?q?=E6=AD=A3=E6=96=B9=E5=BD=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../components/poiuy-uImgUpload/imgUpload.vue | 133 ++++++++++++++++--
.../static/icon_app_1024.png | Bin 0 -> 108395 bytes
2 files changed, 124 insertions(+), 9 deletions(-)
create mode 100644 java-mall-app-shop-admin/static/icon_app_1024.png
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 0000000000000000000000000000000000000000..2ea5cde7d4e45a758d02a629e2e40918406feb2e
GIT binary patch
literal 108395
zcmeFa4O~=Z`ahhR(P~Or$`%4^zMzuBrUe?}RMt|NvSmi*$kf_sCCbYrhy$F`jLei2
z^`t0NuDMA{jU_W7jEahQgxNC1QDJx=mBA5^8DL({|9hP?FKq2T`+R=S@Av;d&*$0w
z?5El_IOp8=bzd*v@Atay^?#llGj#BSgKxX-wxQ2G`}9k<-F655@s8W>x)Xn6g2L9`
zHelbB=bnD@j!)~_PH%%pBuhm|BjNFr=MQ3WXUV@@t-vMkL~RL#DCtUUmX`m
zPg%0$Pk(y)gOa=*gY_>giA!6VmKLk0N51f7LSEs)AFuEK$G`AX-n=YZd47J}qJQ`c
z&yK#_`m28x|Fchbw;|$J|0?}YUUB-c_Se69f1xXU*5RsO|LV9!-OK~(<-dKE{XF;S
za^-JcCC(}T@ISBqpH=^l!TiGs6;9!Qj_H3q%zvEY|M8H-5BX|6cSF08TcH}vwvRHY
zV~*UxR*m$;Reoy!=-8)weW%8pe_3Nbyf4X6oh(tEn4M%uIOdL%PU%`tv~$^B4N5k+
zB&G(%Od8;UKt#|^~8uq-O~}0
zL)vd%mR!Els@^#H;Oh6@Zd8Z59%G$WeaeFSC93n0jcPyX7A|#@a>p8XHqa*>=2=Cj
z<-5ll)y_ruB`+LfCavejO1Nfqf^6h5Mb{k3<%`YgmwH3qPCu>iV>JmoHQ(GHKVf~?
z31)qQY>9Hg*RsRfDn;NzS@&({PAFm>%Ov*pf)@1znRS2S359>wSX!PbgWM@ZH#5qU
z2=oyuG(u+y~Y=E_oQC(EqC1xFP{
z_E%)DOyc*7dFALIDR`fS6-nA%!7ftvqcyClqcuoyPQ=a
zN<$j+2T@TQ%B;
zLnUEB;V*y0jdjg_VGR4jW-h+-yw+Sg6aR31oA!F|MPrLP#6D7D|0%IveSRjpJh(~S
z7IIdRlRikI`i?c>6(44Imu=!AB4EUx4GmxCJz1vLaI$i;rm~rOHfcd%Pe{wQy3e>e
z`+XYoBjFrBq3NhX*SSY#t(Bium~J#P>wZ=m@=E>KQd?+>p>mn#`npy0!YbVwF3TRe
zs%%N1EVXmBMAd_%yhpyB3+|dCv;Msz$#7v9dw!GWkjZcN9y0w8IAkHtB@%mnI4tU>
z^h{XkBlPQGjq%(07f-#)$q(LZQb(%%B`Qm7vpTmX>HLt6?<)4waRS_CpXA4*SG#oqB6!ds3X$@;A0w@ttI)#6vp0@GV4NVrDAzKvuS>+VcE
zGe7+HJTA)?pfTso+`!#Pe=vN@;-wmMYfK7O|3fa=iPgUuV8Z*HQS43eoS9kPnubq*
z1xM_h@ub3NQ^-